javascript - d3.js 中比例变化时图表不会变化

Question

我已经编写了折线图的代码。该图必须将比例从线性更改为幂。现在代码工作正常，可以将比例从线性更改为幂，但我的问题是，图表上的线条不会根据比例变化。我尝试了很多，使用了各种技巧，但线路没有改变。请帮我。下面是我的代码。非常感谢。

// Define the line
var priceline = d3.svg.line()	
    .x(function(d) { return x(d.Yr); })
    .y(function(d) { return y(d.a_median); });
    

var data1 = [];
var dataNest = [];

   // Get the data
var rb = d3.selectAll("input").on("change", change);
   
d3.csv("data/salary.csv", function(error, data) {
    data.forEach(function(d) {
		d.Yr = parseDate(d.Yr);
		d.a_median = +d.a_median;
    });


    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.Yr; }));
    y.domain([0, d3.max(data, function(d) { return d.a_median; })]);

    // Nest the entries by symbol
    dataNest = d3.nest()
        .key(function(d) {return d.occ_title;})
        .entries(data);

    data1 = data;
	
	// Loop through each symbol / key
    dataNest.forEach(function(d,i) { 
    	//console.log(d);
        path = svg.append("path")
        	.data(data)
            .attr("class", "line")
            .style("stroke", "grey")  
            .attr("id", dh+'tag'+d.key) // assign ID  'tag'+d.key.replace(/\s+/g, '')  
            .attr("d", priceline(d.values))
    });		
    
});

function change(){
    if(this.value === "linear"){          

          y = d3.scale.linear()
              .range([height, 0]);                      
           
        y.domain([0, d3.max(data1, function(d) { return d.a_median; })]);

            dataNest.forEach(function(d){
           		svg.selectAll(".line")
           			.data(data1)            
           			.transition().delay(500).duration(5000)
           			.attr("d", priceline(d.values))           			
           });
           
          svg.selectAll(".y")
           .transition().delay(1000).duration(1000)
           .call(yAxis.scale(y));
          
       	}


        if(this.value === "power"){         

           y = d3.scale.pow().exponent(3)
              .range([height, 0]);
            
   		y.domain([0, d3.max(data1, function(d) { return d.a_median; })]);
            
            dataNest.forEach(function(d){               		
           		svg.selectAll(".line")
           			.data(data1)                			        .transition().delay(500).duration(5000)           			
           			.attr("d", priceline(d.values))
           			               	
           })          

            svg.selectAll(".y")
           .transition().delay(1000).duration(1000)
           .call(yAxis.scale(y));    

           
        }        
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="plot" style="display:inline-block"></div>
	<div id="legend" style="display:inline-block"></div>
	<div id="scale" style="">
		<input type="radio" id="linear" name="r1" value="linear"><label for="r1">Linear</label>
		<input type="radio" id="power" name="r1" value="power" ><label for="r1">Power</label>
		<input type="radio" id="log" name="r1" value="log" ><label for="r1">Log</label>
	</div>

Answer 1

您还需要更新 path 的 d 属性，即在您的 change() 函数运行中

svg.selectAll("path")
   .attr("d", priceline(d.values))