Question

我正在创建一个如此的序数比例：

var x = d3.scale.ordinal()
          .domain(["b1", "b2", "b3", "b4", "b5"])
          .rangeBands([0, width], .1);

如果我将此刻度与轴一起使用：

var xaxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

svg.append("g")
   .attr("class", "axis")
   .call(xaxis)
   .attr("transform", "translate(" + 0 + "," + height + ")");

我发现当轴在5个条形的条形图中渲染时，它会在最后添加数字。所以我得到了：

b1,b2,b3,b4,b5,0,1,2,3,4.

此外，条形图未与刻度线对齐。

如何让轴表现得如此，以至于我在5条线下得到b1,b2,b3,b4,b5？

这是整个功能：

  function barchart_2d_array(width, height, barwidth, data, target_div){


    var margin = {top: 20, right: 20, bottom: 30, left: 40},
        w = width + margin.left + margin.right,
        h = height + margin.top + margin.bottom;



    var dataset = data;

    values_arr=[];

    for(var o in dataset){
        values_arr.push(dataset[o]);
    }

    var x = d3.scale.ordinal()
                    .rangeBands([0, width], .1);



    var y = d3.scale.linear()
                    .domain([0,d3.max(values_arr)])
                    .range([height,0]);



    var svg = d3.select(target_div)
                .append("svg")
                .attr("width", w)
                .attr("height", h)
                .attr("style","border : 1px solid black")
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    x.domain(["b1", "b2", "b3", "b4", "b5"]);

    window.x=x;
    window.width=width;

    svg.selectAll("rect")
        .data(values_arr)
        .enter()
        .append("rect")
        .attr("x",function(d,i){
            return x(i);
        })
        .attr("y",function(d,i){
            return y(d);
        })
        .attr("width",barwidth)
        .attr("height",function(d,i){
            return height - y(d);
        });

    var yaxis = d3.svg.axis()
                      .scale(y)
                      .orient("left")
                      .ticks(5);

    var xaxis = d3.svg.axis()
                      .scale(x)
                      .orient("bottom");

    svg.append("g")
        .attr("class", "axis")
        .call(yaxis);

    svg.append("g")
        .attr("class", "axis")
        .call(xaxis)
        .attr("transform", "translate(" + 0 + "," + height + ")");

};

这就是我所说的：

<div id="bar_chart">

</div>
<script>
    var dataset = { "b1":100, "b2":200, "b3":300, "b4":400, "b5":500 };

    a = barchart_2d_array(400,200, 5,dataset,"#bar_chart");

</script>

Answer 1

如果以前没见过，D3的序数量表会隐含地将值添加到域中。您的代码会传递您在此函数中看到的其他值：

.attr("x",function(d,i){
    return x(i);
})

i是从0开始的选择中节点的索引。

你应该再看一下你绑定的数据集，因为我不认为它做你想做的事情。您将数据对象转换为数组，但在此过程中您将删除属性名称。您的数组只包含值（[100, 200, 300, 400, 500]），而不是x比例所期望的条形名称。

您可能希望您的数组看起来更像[{name: b1, value: 100}, {name: b2, value: 200}...]，然后您可以像这样缩放x和y的数据：

.attr("x",function(d) {
    return x(d.name);
})
.attr("y",function(d) {
    return y(d.value);
})

一旦你获得了绑定数据的形状，其他一切都应该落实到位。

D3序数量表将数字添加到最后

1 个答案: