如何从一开始就隐藏 D3 行？

Question

所以我目前有这张图，上面有 2 条线。一蓝一红。我在蓝线上有一个功能，当点击它时，它会隐藏红线。但是我希望在页面加载时隐藏红线，然后当您单击蓝线时...它会显示红线。有人知道怎么做吗？

蓝线：

svg.append("path")
    .attr("class", "line")
    .attr("id", "blueLine")
    .attr("d", valueline(data))
    .on("click", function(){
        // Determine if current line is visible
        var active   = redLine.active ? false : true ,
          newOpacity = active ? 0 : 1;
        // Hide or show the elements
        d3.select("#redLine").style("opacity", newOpacity);
        // Update whether or not the elements are active
        redLine.active = active;
    });

红线：

svg.append("path")
    .attr("class", "line")
    .style("stroke", "red")
    .attr("id", "redLine")
    .attr("d", valueline2(data));

Answer 1

您想隐藏红线首字母吗？

svg.append("path")
.attr("class", "line")
.style("stroke", "red")
.attr("id", "redLine")
.attr("d", valueline2(data))
.style('opacity', 0);

只需添加

.style('opacity', 0);

行不通？

如何从一开始就隐藏 D3 行？

How to make D3 line hidden from start?

javascript

onclick

line

show-hide

d3.js