1

我正在动态加载一个数组，其中包含与某些数据相对应的数字。另一个数组带有关联的名称。所以加载时看起来像这样：

var dataArray = [10, 150, 206];
var nameArray = [A, B, C];

然后它的图形如下：

var xI = d3.scale.linear()
      .domain([0, 206])
      .range([0, 270]);
var yI = d3.scale.ordinal()
        .domain([0,1,2])
        .rangeBands([0,40]);
var chart1 = d3.select('#chart')
      .append('svg')
        .attr('width', '300px')
        .attr('height', '40px')
      .append('g')
        .attr('class', 'chart')
        .attr('transform', 'translate(25,5)');

    chart1.selectAll('rect')
        .data(dataArray)
      .enter().append("rect")
        .attr('y', yI)
        .attr("width", xI)
        .attr("height", 5);

    chart1.selectAll('text')
        .data(nameArray)
      .enter().append('text')
        .attr('x', 0)
        .attr('y', function(d){ return yI(d) + yI.rangeBand()/2.5; })
        .attr('dx', -24)
        .attr('dy', '0.25em')
        .attr('text-anchor', 'start')
        .text(String);

希望你还在继续。只要说它运行良好并且这些数组没有任何问题就足够了。

当我在每个数组中有重复的元素时，就会出现问题，如下所示：

var dataArray = [10, 206, 206];
var nameArray = [A, C, C];

可能是由于重复的元素，整个图表呈现不正确。

我觉得我一直盯着它太久了，一直没能想出一个解决方案。如果您需要更多信息，请告诉我。欢迎任何和所有想法。谢谢！

4

1 回答 1

2

当您映射矩形的 y 坐标时，实际上您想要使用索引时，您正在使用带有 y 轴的数据。尝试这个：

chart1.selectAll('rect')
    .data(dataArray)
  .enter().append("rect")
    .attr('y', function(d,i) { return yI(i); } )
    .attr("width", xI)
    .attr("height", 5);
于 2013-01-03T22:16:07.633 回答