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 に答える