如何在多折线图中将数据点与折线一起打开和关闭 [英] How to toggle data points on and off along with lines in multi-line chart

问题描述

单击图例时，我试图在折线图中切换数据点.这是链接到我的小提琴.从我的小提琴中，单击图例时，线和相应的轴将被打开和关闭，而点则没有.相关代码如下.

I am trying to toggle data points in my line chart when the legend is clicked. Here is the link to my fiddle. From my fiddle, when the legend is clicked, the lines and the corresponding axis will be toggled on and off but the points do not. The relevant code is as follows.

    //************* Lines and Data Points ***************
    var colors = ["blue", "red"];

    var thisScale;

    var line = d3.line()
      .x(d => x(d.x))
      .y(d => thisScale(d.y))
      .curve(d3.curveLinear);

    var paths = g.selectAll("foo")
      .data(data)
      .enter()
      .append("path");

    paths.attr("stroke", function (d,i){return colors[i]})
      .attr("d", d => {
        thisScale = yScale[d.yAxis]
        return line(d.data);
      })
      .attr("stroke-width", 2)
      .attr("id", function (d,i){return "line" + i})
      .attr("fill", "none");

    var pointsGroup = g.selectAll(null)
      .data(data)
      .enter()
      .append("g")
      .attr("fill", function(d, i) {
        local.set(this, yScale[i])
        return colors[i];
      });

    var points = pointsGroup.selectAll(null)
      .data(function(d) {
        return d.data
      })
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return x(d.x);
      })
      .attr("cy", function(d, i) {
        return local.get(this)(d.y);
      })
      .attr("r", 3)
      .attr("class", function(d, i) {
        return "dots" + i;
      })
      .attr("clip-path", "url(#clip)")
      .on("mouseover", mouseover)
      .on("mouseleave", mouseleave)

    //************* Legend ***************
    var legend = svg.selectAll(".legend")
    .data(data)
    .enter().append("g")

    legend.append("rect")
      .attr("x", width + 65)
      .attr("y", function(d, i) {
      return 30 + i * 20;
    })
      .attr("width", 18)
      .attr("height", 4)
      .style("fill", function(d, i) {
      return colors[i];
    })

    legend.append("text")
      .attr("x", width + 60)
      .attr("y", function(d, i) {
      return 30 + i * 20;
    })
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d, i) {
      return "Value" + (i + 1);
    })
      .on("click", function(d, i) {
      // Determine if current line is visible
      let opacity = d3.select("#line" + i).style("opacity");
      let newOpacity;
      if (opacity == 0) {
        newOpacity = 1;
      }else {
        newOpacity = 0
      }
      d3.select("#line" + i).style("opacity", newOpacity);
      d3.selectAll("dots" + i).style("opacity", newOpacity);
      d3.select("#ySecAxis" + i).style("opacity", newOpacity);
      d3.select("#yAxisLabel" + i).style("opacity", newOpacity);            
    });

我已将类归因于我的要点.attr("class", function(d, i) { return "dots" + i; })，并试图允许使用d3.selectAll("dots" + i).style("opacity", newOpacity);来切换要点.但是，它不起作用，有人知道这可能是什么问题吗?

I have attributed the class to my points .attr("class", function(d, i) { return "dots" + i; }) and tried to allow the points to be toggled by using d3.selectAll("dots" + i).style("opacity", newOpacity); However, it is not working, anyone knows what could be the issue?

推荐答案

您需要进行2次更改

1-将点类分配给父级g元素，因此仅按点组对i变量进行迭代.不要在点本身上使用分配类.

1 - Assign the dots class to the parent g element, so the i variable is only iterated per group of dots. Don't use assign class on the dots themselves.

var pointsGroup = g.selectAll(null)
  .data(data)
  .enter()
  .append("g")
  .attr("class", function(d, i) {
    return "dots" + i
  })
  .attr("fill", function(d, i) {
    local.set(this, yScale[i])
    return colors[i];
  });

2-通过添加."来选择点类别.在选择名称中

2 - Select the dots class by including "." in the selection name

d3.selectAll(".dots" + i).style("opacity", newOpacity);

这篇关于如何在多折线图中将数据点与折线一起打开和关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！