d3 데이터를 제자리에서 다시 계산할 수 있습니까?

Question

필자에게는 꺾은 선형 차트가 있으며 전체 데이터 배열이이 줄에 연결되어 있습니다. 값 열을 사용하여 데이터의 백분율 (%) 열로 변경하고 싶습니다. 이것을 제 자리에서하는 방법이 있습니까? 새 데이터 집합을 전달하지 않고 DOM에 이미있는 값을 사용합니까?

까지 내가 가지고로 - http://bl.ocks.org/3099307

var width = 700, // width of svg 
     height = 400, // height of svg 
     padding = 100; // space around the chart, not including labels 

var data=[{"date":new Date(2012,0,1), "value": 3, 'pct': 55}, 
    {"date":new Date(2012,0,3), "value": 2, "pct": 30  }, 
    {"date":new Date(2012,0,12), "value": 33, "pct": 10}, 
    {"date":new Date(2012,0,21), "value": 13, "pct": 29}, 
    {"date":new Date(2012,0,30), "value": 23, "pct": 22}]; 


var x_domain = d3.extent(data, function(d) { 
      return d.date; }), 
     y_domain = d3.extent(data, function(d) { return d.value; }); 

// define the y scale (vertical) 
var yScale = d3.scale.linear() 
     .domain(y_domain) 
     .range([height - padding, padding]); // map these top and bottom of the chart 


var xScale = d3.time.scale() 
     .domain(x_domain) 
     .range([padding, width - padding]); // map these sides of the chart, in this case 100 and 600 

// define the y axis 
var yAxis = d3.svg.axis() 
     .orient("left") 
     .scale(yScale); 

// define the x axis 
var xAxis = d3.svg.axis() 
     .orient("bottom") 
     .scale(xScale); 



// create the svg 

var div = d3.select("body"); 

div.select("svg").remove(); 


var vis = div.append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .attr("transform", "translate(" + padding + "," + padding + ")"); 






// draw y axis with labels and move in from the size by the amount of padding 
vis.append("g") 
     .attr("class", "axis yaxis") 
     .attr("transform", "translate("+padding+",0)") 
     .call(yAxis); 

// draw x axis with labels and move to the bottom of the chart area 
vis.append("g") 
     .attr("class", "axis") 
     .attr("transform", "translate(0," + (height - padding) + ")") 
     .call(xAxis); 



// DRAW LINES 

var line = d3.svg.line() 
     .x(function(d) { 
      return xScale(d.date); }) 
     .y(function(d) { 
      return yScale(d.value); }) 
     .interpolate("basis"); 

vis.selectAll(".lines") 
     .data([data]) 
     .enter() 
     .append("svg:path") 
     .attr("d", line) 
     .attr("class", "lines"); 


function rescale() { 
    // change the y axis to show percentage 

    yScale.domain([0,100]) // redraw as percentage outstanding 
    vis.select(".yaxis") 
      .transition().duration(1500).ease("sin-in-out") // https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease 
      .call(yAxis); 

은 무엇 여기됩니까?

// now redraw the line to use pct 
    line.y(function(d) { 
       return yScale(d.pct); }); 

    vis.selectAll("lines") 
       .transition() 
       .duration(500) 
       .ease("linear"); 
} 

Answer 1

귀하의 데이터는 이미 합류, 그래서 당신은 당신의 선택을 업데이트해야한다 :

var yPctScale = d3.scale.linear() 
    .domain([0, 100]) 
    .range([height - padding, padding]); 

var pct_line = d3.svg.line() 
    .x(function(d) { 
     return xScale(d.date); }) 
    .y(function(d) { 
     return yPctScale(d.pct); }) 
    .interpolate("basis"); 

vis.selectAll(".lines") 
    .transition().duration(1500).ease("sin-in-out") 
    .attr("d", pct_line);