我已经为线图编写了代码。该图必须将比例从线性变为功率。现在代码工作正常,可以将比例从线性变为功率但我的问题是,图表上的线条不会根据比例变化。我已经尝试了很多,使用了各种技巧,但线条没有改变。请帮我。下面是我的代码。非常感谢。
// 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>
答案 0 :(得分:1)
您还需要更新d
的{{1}}属性,即在path
函数运行中
change()