1

ここの例のような複数シリーズの折れ線グラフを作成しようとしていますhttp://bl.ocks.org/mbostock/3884955

唯一の違いは、2 つのデータ セット間の遷移を行おうとしていることです。トランジションはまったく問題なく機能しますが、その例のように、シリーズのラベルを各行に揃える方法がわかりません。

どうすればいいのか考えている人はいますか？私のコードは上記の例とは少し異なる方法で設定されているため、厳密には従うことができません。しかし、私がそうしても、データラベルは届きません...

これが私のコードです：

<!DOCTYPE html>
<meta charset="utf-8">
<style>    
body {
  font: 10px serif;
}    
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
    fill: none;
  stroke: #000;
  shape-rendering: crispEdges;

}
    .line {
  fill: none;
  stroke-width: 1.5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>

var width = 550;
            var height = 600;
            var padding=60;

var parseDate = d3.time.format("%Y").parse;
var x = d3.time.scale().range([padding, width-padding]);
var y = d3.scale.linear().range([height-padding, padding]);        

var z = d3.scale.category10();

var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height)


//load CSV
d3.csv("diverge-nonscaled1950.csv", function(error, data) {

    data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.India=+d.India;
    d.China=+d.China;
      });


  //compute column names
var seriesNames = d3.keys(data[0]).filter(function(d) { return d !== "date"; })
      .sort();

 //this is dataset one: data is scaled to column name INdia
      var series = seriesNames.map(function(series) {
    return data.map(function(d) {
      return {x: d.date, y: ((+d[series]/d.India)*100)};
    });

  });

 //this is dataset two: data is scaled to column name China
      var series1 = seriesNames.map(function(series1) {
    return data.map(function(d) {
      return {x: d.date, y: ((+d[series1]/d.China)*100)};
    });

  });


var line = d3.svg.line()
    .interpolate("basis")
   // .defined(function(d) { return d.country>0; })
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });   


//domains
x.domain(d3.extent(data, function(d) { return d.date; }));
 y.domain([0,2300]);
 z.domain(seriesNames)


//axes
  svg.append("g")
      .attr("class", "x axis")
.attr("transform", "translate(0," + (height-padding) + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + padding + ",0)")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("x",0-(height/2.5))
      .attr("y", -50)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .style("font-size",11)
      .text("Relative per Capita Incomes");;

//draw path
svg.selectAll(".line")
    .data(series)
  .enter().append("path")
    .attr("class", "line")
    .attr("d", line)
    .attr("stroke",function(d, i) { return z(i); })

 //first transition from dataset one to two   
d3.select("svg")
               .on("click",file1);

function file1(){
svg.selectAll(".line").data(series1)
    .transition().duration(750)
    .attr("d", line)
    .attr("stroke",function(d, i) { return z(i); })

d3.select("svg")
               .on("click",file2);

  }

 //second transition back to one
function file2(){
svg.selectAll(".line").data(series)
    .transition().duration(750)
    .attr("d", line)
    .attr("stroke",function(d, i) { return z(i); })

d3.select("svg")
               .on("click",file1);


} 



});

</script>
</body>

何か助けてくれてありがとう... Avin

4

1 に答える 1

1

私も少し前までこれで悩んでいました。投稿した例のように、個々の要素のデータを取得する d3 のselection.datum()メソッドを使用する必要があります。次に、各シリーズの最終データ ポイントを選択し、thing[thing.length - 1]そのポイントの x 値と y 値を使用して、テキストの変換/翻訳を実行します。コードの関連部分は次のとおりです。

 city.append("text")
  .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
  .attr("transform", function(d) { 
      return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")";
  })

次に、アニメーションは、次のような変換を更新するだけの問題です。

city.selectAll('text').transition()
    .attr("transform", function(d) { 
        return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; 
    })

あなたがやろうとしていることと似ていると思われる少し前に私が作成したチャートを見ることもできます。

于 2013-03-05T13:04:39.417 に答える