javascript - 如何使用图例切换折线图中的线条

Question

这个问题实际上是here问题的延续.从那时起，我对我的 fiddle 和代码做了一些更改，但我仍然面临同样的问题。可以找到我的 fiddle 和代码的链接 here .

我正在使用 for 循环来绘制线条，因为我希望图表是动态的，这意味着线条的数量是根据数据数组中的数组数量绘制的。在这种情况下，我的数据数组中有 2 个数组，如下所示。

var data = [[{x: 0, y: 0}, {x: 10, y: 10}, {x: 20, y: 20}, {x: 30, y: 30}, {x: 40, y: 40}], 
[{x: 0, y: 0}, {x: 10, y: 200}, {x: 20, y: 300}, {x: 30, y: 400}, {x: 40, y: 500}]];

根据我的 fiddle ，当我同时单击“Y 轴 1”和“Y 轴 2”时，蓝线将打开和关闭。但是，我希望在单击 Y 轴 2 时打开和关闭红线。发生这种情况是因为我在这段代码中为两行分配了相同的 ID。

    //************* Plotting of graph ***************
    var colors = ["blue", "red"];
    //plot of chart
    for (var i = 0; i < 2; i++){
      var lineFunction = d3.line()
      .x(function(d) {return x(d.x); })
      .y(function(d) {return yScale[i](d.y); })
      .curve(d3.curveLinear);

      //plot lines
      var paths = g.append("path")
      .attr("class", "path1")
      .attr("id", "blueLine")
      .attr("d", lineFunction(data[i]))
      .attr("stroke", colors[i])
      .attr("stroke-width", 2)
      .attr("fill", "none")
      .attr("clip-path", "url(#clip)")

      //plot a circle at each data point
      g.selectAll(".dot")
        .data(data[i])
        .enter().append("circle")
        .attr("cx", function(d) { return x(d.x)} )
        .attr("cy", function(d) { return yScale[i](d.y); } )
        .attr("r", 3)
        .attr("class", "blackDot")
        .attr("clip-path", "url(#clip)")
        .on("mouseover", mouseover )
        .on("mouseleave", mouseleave )
    }

有没有更好的方法来绘制线条，以便我可以为绘制的每条线条分配一个特定的 ID 并根据图例切换线条？我试过使用 forEach() 但似乎无法让它工作。非常感谢任何帮助!

Answer 1

首先:您应该不使用循环(for、while、forEach 等。 .) 在 D3 代码中追加元素。这不是惯用的，你最终会竭尽全力解决问题，就像这个问题将证明的那样。

最简单的解决方法是使用索引来设置行的 ID...

var paths = g.append("path")
    .attr("class", "path1")
    .attr("id", "blueLine" + i)

... 然后，在点击监听器中，使用这个笨拙且笨拙的 window 属性，即元素的 ID:

.on("click", function(d, i) {
  var active = window["blueLine" + i].active ? false : true,
    newOpacity = active ? 0 : 1;
  d3.select("#blueLine" + i).style("opacity", newOpacity);
  window["blueLine" + i].active = active;
});

这是您的代码，其中包含这些更改:

var xValueArray = [0, 10, 20, 30, 40];
var arr = [
  [0, 10, 20, 30, 40],
  [0, 200, 300, 400, 500]
];
//data array is obtained after structuring arr array
var data = [
  [{
    x: 0,
    y: 0
  }, {
    x: 10,
    y: 10
  }, {
    x: 20,
    y: 20
  }, {
    x: 30,
    y: 30
  }, {
    x: 40,
    y: 40
  }],
  [{
    x: 0,
    y: 0
  }, {
    x: 10,
    y: 200
  }, {
    x: 20,
    y: 300
  }, {
    x: 30,
    y: 400
  }, {
    x: 40,
    y: 500
  }]
];

const margin = {
  left: 20,
  right: 20,
  top: 20,
  bottom: 80
};

const svg = d3.select('svg');
svg.selectAll("*").remove();

const width = 200 - margin.left - margin.right;
const height = 200 - margin.top - margin.bottom;

//const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
const g = svg.append('g').attr('transform', `translate(${80},${margin.top})`);

//************* Axes and Gridlines ***************

const xAxisG = g.append('g');
const yAxisG = g.append('g');

xAxisG.append('text')
  .attr('class', 'axis-label')
  .attr('x', width / 3)
  .attr('y', -10)
  .style('fill', 'black')
  .text(function(d) {
    return "X Axis";
  });

yAxisG.append('text')
  .attr('class', 'axis-label')
  .attr('id', 'primaryYLabel')
  .attr('x', -height / 2)
  .attr('y', -15)
  .attr('transform', `rotate(-90)`)
  .style('text-anchor', 'middle')
  .style('fill', 'black')
  .text(function(d) {
    return "Y Axis 1";
  });

// interpolator for X axis -- inner plot region
var x = d3.scaleLinear()
  .domain([0, d3.max(xValueArray)])
  .range([0, width])
  .nice();

var yScale = new Array();
for (var i = 0; i < 2; i++) {
  // interpolator for Y axis -- inner plot region
  var y = d3.scaleLinear()
    .domain([0, d3.max(arr[i])])
    .range([0, height])
    .nice();
  yScale.push(y);
}

const xAxis = d3.axisTop()
  .scale(x)
  .ticks(5)
  .tickPadding(2)
  .tickSize(-height)

const yAxis = d3.axisLeft()
  .scale(yScale[0])
  .ticks(5)
  .tickPadding(2)
  .tickSize(-width);

yAxisArray = new Array();
yAxisArray.push(yAxis);
for (var i = 1; i < 2; i++) {
  var yAxisSecondary = d3.axisLeft()
    .scale(yScale[i])
    .ticks(5)
  yAxisArray.push(yAxisSecondary);
}

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", `translate(80,${height-80})`)
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(80,20)")
  .call(yAxis);

//************* Mouseover ***************
var tooltip = d3.select("body")
  .append("div")
  .style("opacity", 0)
  .attr("class", "tooltip")
  .style("background-color", "white")
  .style("border", "solid")
  .style("border-width", "1px")
  .style("border-radius", "5px")
  .style("padding", "10px")
  .style("position", "absolute")

// A function that change this tooltip when the user hover a point.
// Its opacity is set to 1: we can now see it. Plus it set the text and position of tooltip depending on the datapoint (d)
var mouseover = function(d) {
  tooltip
    .html("x: " + d.x + "<br/>" + "y: " + d.y)
    .style("opacity", 1)
    .style("left", (d3.mouse(this)[0] + 90) + "px")
    .style("top", (d3.mouse(this)[1]) + "px")
}

// A function that change this tooltip when the leaves a point: just need to set opacity to 0 again
var mouseleave = function(d) {
  tooltip
    .transition()
    .duration(200)
    .style("opacity", 0)
}

//************* Plotting of graph ***************
var colors = ["blue", "red"];
//plot of chart
for (var i = 0; i < 2; i++) {
  var lineFunction = d3.line()
    .x(function(d) {
      return x(d.x);
    })
    .y(function(d) {
      return yScale[i](d.y);
    })
    .curve(d3.curveLinear);

  //plot lines
  var paths = g.append("path")
    .attr("class", "path1")
    .attr("id", "blueLine" + i)
    .attr("d", lineFunction(data[i]))
    .attr("stroke", colors[i])
    .attr("stroke-width", 2)
    .attr("fill", "none")
    .attr("clip-path", "url(#clip)")

  //plot a circle at each data point
  g.selectAll(".dot")
    .data(data[i])
    .enter().append("circle")
    .attr("cx", function(d) {
      return x(d.x)
    })
    .attr("cy", function(d) {
      return yScale[i](d.y);
    })
    .attr("r", 3)
    .attr("class", "blackDot")
    .attr("clip-path", "url(#clip)")
    .on("mouseover", mouseover)
    .on("mouseleave", mouseleave)
}

var translation = 50;
var textTranslation = 0;
var yLabelArray = ["Y Axis 1", "Y Axis 2"];

//loop starts from 1 as primary y axis is already plotted
for (var i = 1; i < 2; i++) {
  svg.append("g")
    .attr("transform", "translate(" + translation + "," + 20 + ")")
    .call(yAxisArray[i]);

  yAxisG.append('text')
    .attr('x', -height / 2)
    .attr('y', -60)
    .attr('transform', `rotate(-90)`)
    .style('text-anchor', 'middle')
    .style('fill', 'black')
    .text(yLabelArray[i]);

  translation -= 20;
  textTranslation += 20;
}

//************* Legend ***************
var legend = svg.selectAll('.legend')
  .data(data)
  .enter()
  .append('g')
  .attr('class', 'legend');

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

legend.append('text')
  .attr('x', width - 10)
  .attr('y', function(d, i) {
    return (i * 20) + 120;
  })
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text(function(d, i) {
    return yLabelArray[i]
  })
  .on("click", function(d, i) {
    //Determine if current line is visible
    var active = window["blueLine" + i].active ? false : true,
      newOpacity = active ? 0 : 1;
    //Hide or show the elements
    d3.select("#blueLine" + i).style("opacity", newOpacity);
    //Update whether or not the elements are active
    window["blueLine" + i].active = active;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg class="xy_chart"></svg>