如何获取d3轴刻度以匹配我的数据

How can I get the d3 axis ticks to match my data?

本文关键字：数据 我的 何获取 获取 d3      更新时间：2023-11-01

这是我的代码：

    <!doctype html>
<html>
<head>
    <title>D3</title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
    <script>
     var dataArray=[{"letter":"a", "value":20},
                {"letter":"b", "value":40}, 
                {"letter":"c", "value":50},
                {"letter":"m", "value":60}];
 console.log(dataArray)
 var width=500;
 var height=500;
 var widthScale=d3.scale.linear()
            .domain([0, 60])
            .range([0, width]);
 var heightScale=d3.scale.ordinal()
            .domain(dataArray.map(function(d){ return d.letter }))
            .range([0,height-125]);
 var letterScale=d3.scale.linear()
        .domain([0,26])
        .range(["A","B","c","d"])
 var color=d3.scale.linear()
            .domain([0,60])
            .range(["red", "blue"]);
 var x_axis=d3.svg.axis()
        .orient("bottom")
        .ticks(12)
        .scale(widthScale);
 var y_axis=d3.svg.axis()
        .orient("left")
        .ticks(4)
        .tickFormat(function (d) {return d})
        .scale(heightScale);
 var canvas=d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(25, 0)");
 var bars=canvas.selectAll("rect")
        .data(dataArray)
        .enter()
            .append("rect")
                .attr("width", function(d) {return widthScale(d.value);})   
                .attr("height", 50)
                .attr("fill", function(d) {return color(d.value)})
                .attr("y", function(d, i) {return i*100});
// bars.append("text")
//      .attr("x", function(d) {return widthScale(d)/2})
//      .attr("y", function(d) {return -heightScale(d)})
//      .style("stroke-width", 6)
//      .style("text-anchor", "middle")
//      .style("font-size", "34px")
//      .style("fill", "black")
//      .text(function(d) {return console.log(d);});
 canvas.append("g")
    .attr("transform", "translate(5, 375)")
    .call(x_axis);
 canvas.append("g")
    .attr("transform", "translate(5,0)")
    .call(y_axis)
    </script>
</body>
</html>

我不知道如何让y轴刻度与数据匹配并与条形图对齐？或者，正如你在注释掉的代码中看到的那样，我很难让文本出现。正确的文本（数字）会显示在开发工具的元素中，但不会显示在页面上。如有任何帮助，我们将不胜感激。

这不是D3的问题，而是关于统计和数据的问题，即：你说"我不知道如何获得y轴刻度来匹配数据"，但什么数据？没有！

您的数据集只是一个由4个值组成的数组。如果要为每个值绘制一个水平条，x轴将显示一个定量变量（值：20、40、50、60）。但y轴只显示不同的条形图：其分类，而不是定量。例如，这4个酒吧可以有橙子、苹果、香蕉和酸橙。

所以，你的y轴必须是heightScale = d3.scale.ordinal()，而不是linear，你必须设置条形图的分类值，就像我在这里对一组对象所做的那样：

var dataArray = [
    {
        "fruit": "orange",
        "value": 20
    },
    {
        "fruit": "apple",
        "value": 40
    },
    {
        "fruit": "banana",
        "value": 50
    },
    {
        "fruit": "lime",
        "value": 60
    }
]

之后，您将域设置为：

heightScale.domain(dataArray.map(function(d){ return d.fruit }));

然后，您不需要使用i * 100设置y位置。相反，你可以用一种更灵活的方式设置它：

.attr("y", function(d){ return heightScale(d) });

只要更改字母（a、b、c、d）的"水果"，你就会得到你想要的。

相关文章：