4

d3.js でタイムライン チャートを作成しようとしています。下の画像でわかるように、三角形を y 軸の値と同じ方向に配置することはできません。マイルストーンは、関連する y 軸コンポーネントの中央に配置されます。

yaxis 開始コード フラグメント:

    var x = d3.time.scale().rangeRound([0, self.config.width]);
    var y = d3.scale.ordinal().rangeRoundBands([self.config.height, 0]);

    var xAxis = d3.svg.axis().scale(x).orient("bottom").tickSubdivide(4).tickSize(6, 3, 0);//.ticks(d3.time.months,4)
    var yAxis = d3.svg.axis().scale(y).orient("left").tickSize(4);

svg に y 軸を追加:

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

マイルストーンのコード フラグメント:

var abs = svg.selectAll(".milestone")
          .data(data)
        .enter().append("g");

        abs.selectAll("symbol")
          .data(function(d) { 
            return d.milestoneList; 
          })
        .enter().append("svg:path")
          .attr("transform", function(d) { 
            return "translate(" + x(d.deadline) + "," + y(d.name) + ")"; 
          })
          .attr("d", d3.svg.symbol().type("triangle-down"));

たとえば、FG55 の y 軸が設定されています。translate(0,423)ただし、FG55 からのマイルストーンが設定されtranslate(<xValue for each>,376)ているため、y には 47 ピクセルの違いがあります。

yaxis ラベルと目盛りを適切に配置するにはどうすればよいですか?

チャート

4

2 に答える 2

1

次のようにコードを変更しました。

古いコード 

var y = d3.scale.ordinal().rangeRoundBands([self.config.height, 0]);

新しいコード

var y = d3.scale.ordinal().rangePoints([self.config.height, 0], 1.5);
于 2013-11-19T04:10:03.130 に答える