Question

我的 d3.js 折线图有问题。实际上，当值接近轴时，看不到线系列。您可以在附图中看到问题。

这是代码，抱歉有点长，但我真的不知道问题出在哪里。

我认为问题不在于任何 css，而更多在于 SVG 本身。

function realTimeLineChart() {
  // console.log(interval);
  var margin = { top: 50, right: 60, bottom: 50, left: 60 },
    width = maxWidth,
    height = 400,
    duration = interval;
  color = d3.schemeCategory10;
  strtime = new Date().getTime();
  var label_table = {
    P: "x",
    E: "y",
  };

  var TimeFormatLive = function (d) {
    //CODE FOR FORMATTING THE X-AXIS LABELS
  };

  function chart(selection) {
    // Based on https://bl.ocks.org/mbostock/3884955
    selection.each(function (data) {
      data = ["P", "E"].map(function (c) {
        return {
          label: c,
          values: data.map(function (d) {
            return { time: +d.time, value: d[label_table[c]] };
          }),
        };
      });

      var t = d3.transition().duration(duration).ease(d3.easeLinear),
        x = d3
          .scaleLinear()
          .rangeRound([0, width - margin.left - margin.right]),
        yp = d3
          .scaleLinear()
          .rangeRound([height - margin.top - margin.bottom, 0]),
        ye = d3
          .scaleLinear()
          .rangeRound([height - margin.top - margin.bottom, 0]),
        z = d3.scaleOrdinal(color);

      var xMax = new Date().getTime() - strtime;
      var xMin = xMax - 1 * 60 * 1000;
      x.domain([xMin, xMax]);
      yp.domain([0, MaxP]).nice();
      ye.domain([0, MaxElong]).nice();

      var line = d3
        .line()
        .curve(d3.curveBasis)
        .x(function (d) {
          return x(d.time);
        })
        .y(function (d) {
          return yp(d.value);
        });
      var line2 = d3
        .line()
        .curve(d3.curveBasis)
        .x(function (d) {
          return x(d.time);
        })
        .y(function (d) {
          return ye(d.value);
        });

      var svg = d3.select(this).selectAll("svg").data([data]);

      var gEnter = svg.enter().append("svg").append("g");
      let xPixel = width / 2 - margin.top;
      

      gEnter.append("g").attr("class", "axis x");
      gEnter.append("g").attr("class", "axis yp");
      gEnter.append("g").attr("class", "axis ye");
      gEnter
        .append("defs")
        .append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width - margin.left)
        .attr("height", height - margin.top);
      gEnter
        .append("g")
        .attr("class", "lines")
        .attr("clip-path", "url(#clip)")
        .selectAll(".data")
        .data(data)
        .enter()
        .append("path")
        .attr("class", "data");


...

      g.selectAll("g path.data")
        .data(data)
        .style("stroke", function (d) {
          return z(d.label);
        })
        .style("stroke-width", 1)
        .style("fill", "none")
        .transition()
        .duration(duration)
        .ease(d3.easeLinear)
        .on("start", tick);
        })

...

      // For transitions https://bl.ocks.org/mbostock/1642874
      function tick() {
        //console.log(data);

        d3.select(this)
          .attr("d", function (d) {
            //console.log(d)

            if (d.label == "P") {
              //console.log(d.label)
              return line(d.values);
            } else if (d.label == "E") {
              //console.log(d.label)
              return line2(d.values);
            } 
          })
          .attr("transform", null);

        var xMinLess = new Date(new Date(xMin).getTime() - duration);
        d3.active(this)
          .attr("transform", "translate(" + x(xMinLess) + ",0)")
          .transition()
          .on("start", tick);
      }
    });
  }

  ....

  return chart;
}

Answer 1

好的，在谷歌搜索了一段时间后终于找到了我的解决方案！！

问题来自定义可以绘制系列的位置的clipPath，并且那里有错误。我扣除了右边的边距（设置为 60）而不是底部（设置为 50）所以有一个 10px 高度的带，没有显示系列。

  g.select("defs clipPath rect")
    .transition(t)
    .attr("width", width - margin.left - margin.right)
    .attr("height", height - margin.top - margin.bottom); // here is was -margin.right

D3.js 折线图 - 看不到靠近轴的线

1 个答案: