系列標籤

我試圖做喜歡這裏的例子http://bl.ocks.org/mbostock/3884955 系列標籤

唯一的區別在於我試圖做兩套之間躍遷的多系列折線圖數據的。轉換工作絕對正常，但我不知道如何開始讓系列標籤與每條線對齊，就像該示例中的情況一樣。

有沒有人有任何想法如何去呢？我的代碼的設置方式與上面的例子稍有不同，所以我無法嚴格遵守。但是，即使當我做，數據標籤不來通過......

這裏是我的代碼：

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

來源

2013-03-05 user2134537

我遇到了麻煩這也是前一陣子。正如您發佈的示例，您必須使用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) + ")"; 
    })

您還可以查看a chart我做了一個前一陣子，似乎與你想要做的事情類似。

來源

2013-03-05 13:04:39 nsonnad

非常感謝。你的圖表與我試圖做的絕對相似。希望我能適應它... – user2134537 2013-03-06 13:10:12

回答

相關問題