0

我正在创建一个像这样的序数比例：

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.

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

如何使轴表现得b1,b2,b3,b4,b5低于 5 条？

这是整个函数：

  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>
4

1 回答 1

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}...]然后您可以像这样缩放数据：xy

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

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

于 2013-07-31T05:33:53.403 回答