如何获得 d3 轴刻度以匹配我的数据？答案

【问题标题】：How can I get the d3 axis ticks to match my data?如何获得 d3 轴刻度以匹配我的数据？
【发布时间】：2016-07-21 21:04:22
【问题描述】：

这是我的代码：

    <!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 轴刻度与数据匹配并与条形对齐？或者，正如您在注释掉的代码中看到的那样，我努力让文本出现。正确的文本（数字）会显示在开发工具的元素中，但不会显示在页面上。任何帮助将不胜感激。

【问题讨论】：

标签： javascript d3.js scale attr rect

【解决方案1】：

这不是 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），你就会得到你想要的。

【讨论】：

我做了上面的改动，除了
除了y轴现在在页面上返回极长