我尝试为D3制作交互式图例，但没有成功。上面的代码仅在一行上起作用，但是如果我单击（绿色，蓝色，红色或黄色）图例矩形，它只会隐藏一条红线吗？问题出在哪里？我认为问题是#tag id？
此代码会在每次点击图例时隐藏红线。
我认为这些行会产生此错误？
var colorLegendG__3 = g__3.append("g")
.attr("class", "color-legend")
.attr("transform", "translate(40, 240)")
.on("click", function(){
// Determine if current line is visible
var active = d.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements based on the ID
d3.select("#tag"+d.key.replace(/\s+/g, ''))
.transition().duration(100)
.style("opacity", newOpacity);
// Update whether or not the elements are active
d.active = active;
})
var colorLegend__3 = d3.legend.color()
.scale(colorScale__3)
.shapePadding(3)
.shapeWidth(10)
.shapeHeight(10)
.labelOffset(4);
这是此D3多折线图的代码。
var web1_address__3 = "http://localhost";
var web2_address__3 = "/data3.php";
var data_address__3 = web1_address__3 + web2_address__3;
var outerWidth__3 = 600;
var outerHeight__3 = 300;
var margin__3 = { left: 60, top: 5, right: 5, bottom: 100 };
var xAxisLabelText__3 = "";
var xAxisLabelOffset__3 = 48;
var yAxisLabelText__3 = "";
var yAxisLabelOffset__3 = 60;
var innerWidth__3 = outerWidth__3 - margin__3.left - margin__3.right;
var innerHeight__3 = outerHeight__3 - margin__3.top - margin__3.bottom;
var svg__3 = d3.select("#area__3").append("svg")
.attr("width", outerWidth__3)
.attr("height", outerHeight__3);
var g__3 = svg__3.append("g")
.attr("transform", "translate(" + margin__3.left + "," + margin__3.top + ")");
var xAxisG__3 = g__3.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerHeight__3 + ")")
var xAxisLabel__3 = xAxisG__3.append("text")
.style("text-anchor", "middle")
.attr("transform", "translate(" + (innerWidth__3 / 2) + "," + xAxisLabelOffset__3 + ")")
.attr("class", "label")
.text(xAxisLabelText__3);
var yAxisG__3 = g__3.append("g")
.attr("class", "y axis");
var yAxisLabel__3 = yAxisG__3.append("text")
.style("text-anchor", "middle")
.attr("transform", "translate(-" + yAxisLabelOffset__3 + "," + (innerHeight__3 / 2) + ") rotate(-90)")
.attr("class", "label")
.text(yAxisLabelText__3);
var xScale__3 = d3.scale.ordinal().rangeRoundBands([0, innerWidth__3], .5);
var yScale__3 = d3.scale.linear().range([innerHeight__3, 0]);
var colorScale__3 = d3.scale.category10();
var siFormat__3 = d3.format(".1", 1e6);
var customTickFormat__3 = function (d){
return siFormat__3(d).replace("G", "B");
};
var xAxis__3 = d3.svg.axis().scale(xScale__3).orient("bottom")
.ticks(20)
.outerTickSize(0);
var yAxis__3 = d3.svg.axis().scale(yScale__3).orient("left")
.ticks(10)
.tickFormat(customTickFormat__3)
.outerTickSize(0);
var line__3 = d3.svg.line()
.interpolate("basis")
.x(function(d) { return xScale__3(d.xColumn__3); })
.y(function(d) { return yScale__3(d.yColumn__3); });
function render__3(data) {
d3.json(data_address__3, function(error, data) {
data.data.forEach(function(d) {
d.xColumn__3 = d.key[1];
d.yColumn__3 = +d.values[0];
d.lineColumn__3 = d.key[2];
console.log(d.xColumn__3);
console.log(d.yColumn__3);
console.log(d.lineColumn__3);
})
xScale__3.domain(data.data.map(function(d) { return d.xColumn__3; }));
yScale__3.domain([0, d3.max(data.data, function (d){ return d.yColumn__3; })]);
xAxisG__3
.call(xAxis__3)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function(d) {
return "rotate(-65)"
});
yAxisG__3.call(yAxis__3);
var nested__3 = d3.nest()
.key(function (d){ return d.lineColumn__3; })
.entries(data.data);
// Loop through each symbol / key
nested__3.forEach(function(d,i) { //UUSI
colorScale__3.domain(nested__3.map(function (d){ return d.key; }));
var paths__3 = g__3.selectAll(".chart-line").data(nested__3);
paths__3.enter()
.append("path")
.attr("class", "chart-line")
//.attr("class", 'tag'+d.key.replace(/\s+/g, '')); // assign ID
.attr("id", function(d){ return 'tag' + d.key.replace(/\s+/g, '');});
paths__3.exit().remove();
paths__3
.attr("d", function (d){ return line__3(d.values); })
.attr("stroke", function (d){ return colorScale__3(d.key); })
.attr("id", function(d){ return 'tag' + d.key.replace(/\s+/g, '');});
var colorLegendG__3 = g__3.append("g")
.attr("class", "color-legend")
.attr("transform", "translate(40, 240)")
.on("click", function(){
// Determine if current line is visible
var active = d.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements based on the ID
d3.select("#tag"+d.key.replace(/\s+/g, ''))
.transition().duration(100)
.style("opacity", newOpacity);
// Update whether or not the elements are active
d.active = active;
})
var colorLegend__3 = d3.legend.color()
.scale(colorScale__3)
.shapePadding(3)
.shapeWidth(10)
.shapeHeight(10)
.labelOffset(4);
colorLegendG__3.call(colorLegend__3);
});
// Add the text label for the Y axis
svg__3.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - innerWidth__3.left)
.attr("x",0 - (innerHeight__3 / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("%");
})
}
d3.json(data_address__3, render__3);