Svg 使用D3创建可单击的图例

我试图用D3创建一个多折线图，但我一直在切换折线的可见性。到目前为止，只有一行，而我试图把它全部弄清楚（这仍然是一个初学者），但我不能让传奇出现，所以我无法测试它是否真的可以摆脱这行。以下是JavaScript代码：

var BlackBird = [{
    "population": "100",
    "year": "1970"
}, {
"population": "100.8",
    "year": "1971"
}, {
"population": "103.5",
    "year": "1972"
}, {
"population": "95.6",
    "year": "1973"
}, {
"population": "101.7",
    "year": "1974"
}, {
"population": "102",
    "year": "1975"
}
];

var vis = d3.select("#visualisation"),
    WIDTH = 1110,
    HEIGHT = 580,
    MARGINS = {
        top: 30,
        right: 20,
        bottom: 20,
        left: 50
    },

xScale = d3.scale.linear()
    .range([MARGINS.left, WIDTH - MARGINS.right])
    .domain([1970,2008]),

yScale = d3.scale.linear()
    .range([HEIGHT - MARGINS.top, MARGINS.bottom])
    .domain([0,300]),

xAxis = d3.svg.axis()
    .scale(xScale)
    .ticks(25)
    .tickFormat(d3.format('0f')),

yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(12);

vis.append("svg:g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
    .call(xAxis);

vis.append("svg:g")
    .attr("class", "axis")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);

var lineGen = d3.svg.line()
    .x(function(d) {
        return xScale(d.year);
    })
    .y(function(d) {
        return yScale(d.population);
    })

    .interpolate("basis"); 

vis.append('path')
    .attr('d', lineGen(BlackBird))
    .attr('stroke-width', 5)
    .attr('fill', 'none')
    .attr('opacity', '0.2')
    .attr("id", "aline");

vis.append("text")
    .attr("x", WIDTH + MARGINS.left +10)             
    .attr("y", 10)    
    .attr("class", "legend")
    .style("fill", "steelblue")         
    .on("click", function(){
        var active   = aline.active ? false : true,
        newOpacity = active ? 0 : 1;
        d3.select("#aline").attr("opacity", newOpacity);
        aline.active = active;
    })
    .text("Blue Line");

HTML:

---

首先，您没有包含HTML标记，但我假设

#可视化
是一个SVG元素。确保已为其指定高度和宽度属性

其次，您不需要为线条指定
笔划
颜色。我假设你在CSS中的某个地方这样做

第三，在修复变量名称后，这一行：

.attr("x", width + margin.left +10) 

这就是问题所在。这会将文本元素推到SVG之外

这是一个我已经解决了一些问题的地方

编辑

查看CSS后出现的新问题。在代码中设置属性不透明度，CSS设置样式不透明度。当两者都设置时，浏览器将使用该样式。因此，将单击处理程序更改为：

  .on("click", function() {
    var active = aline.active ? false : true,
      newOpacity = active ? 0 : 1;
    d3.select("#aline").style("opacity", newOpacity); //<-- set style, not attr
    aline.active = active;
  })

.on（“单击”，函数（）{
var active=aline.active？false:true，
newOpacity=active？0:1；
d3.select（“#aline”）.style（“opacity”，newOpacity）；//你看过NVD3吗？它已经看过了。你的图例中有一些命名错误的变量。svg=vis？width=width？margin=MARGINS？啊！我没有发现拼写错误！谢谢！）虽然，这个问题没有解决！D：看了几个例子，似乎无法让它工作！这似乎是100%的答案！：D我可以看到它也可以工作，虽然，它仍然不想在我的上工作！x.x我也会添加其他代码位，以防在某个地方出错：（在下一篇评论中出现！）D3 Birds.axis path{fill:none；stroke:777；形状渲染：crispEdges；}.axis text{font-family:Lato；font-size:13px；}aline{stroke:000；不透明度：0.5；transition:0.5s；}aline:hover{opacity:1；transition:0.5s；}.Birdie{transition transition:0.5s；不透明度：0.5；}#BlaBird{位置：绝对；左：1150px；顶部：30px；}。图例{字体大小：16px；字体重量：粗体；文本锚定：开始；}（用于添加，第一个回复是HTML，这是CSS！））@dogtorwho，查看更新的答案。另外，下次用新代码更新问题时，不要剪切/粘贴到评论中。这次我冒昧地更新了你的问题。哇！成功了！：D现在开始工作了！谢谢你/so/，非常感谢你的帮助！你太棒了！：）
.attr("x", width + margin.left +10) 

  .on("click", function() {
    var active = aline.active ? false : true,
      newOpacity = active ? 0 : 1;
    d3.select("#aline").style("opacity", newOpacity); //<-- set style, not attr
    aline.active = active;
  })