Question

我尝试将旧的 v3 图表升级为 v4 ，并试图追加clipPath。

起初我认为在v4中添加剪辑路径的方式在某种程度上已经改变了，但它看起来和以前一样。

我的参考是Mike Bostocks图表。

here's到目前为止我取得的进展。

我尝试的一件事基本上是复制/粘贴line路径逻辑并更改：

line(d.values)至area(d.values)

我没有收到任何错误，所以我不确定为什么它不起作用。

Answer 1

问题是y比例没有在与剪辑路径相同的环境中计算 - 给剪辑路径高度为0.我将剪辑路径移动到更新函数。您可以更加优雅地更新剪辑路径，但我在顶部添加了一行以删除现有的剪辑路径，以便添加新的剪辑路径：https://plnkr.co/edit/KQC1A70b4O5fNtHrQEkn?p=preview

    function update() {

      d3.selectAll('clipPath').remove();

      VALUE = d3.select('#selectbox').property('value');

      d3.csv("data.csv", function(d, _, columns) {
        d.date = parseDate(d.date);
        for (var i = 1, n = columns.length, c; i < n; ++i) 
        d[c = columns[i]] = +d[c];
        return d;
      }, function(error, data) {
        if (error) throw error;
    baseValue = data[0]["Category" + VALUE];

    console.log(baseValue)

    var keys = data.columns.slice(1,2); 

    var copy = [];

    keys.forEach(function(t) {
      t = t.slice(0, -2) // Slice last two letters
      copy.push(t) // Push sliced strings into copy array
    });

    var cities = copy.map(function(id) {
      return {
        id: id,
        values: data.map(function(d) {
          return {date: d.date, city: d[id+VALUE] / baseValue};
        })
      };
    });

    x.domain(d3.extent(data, function(d) { return d.date; }));

    y.domain([
      d3.min(cities, function(c) { 
        return d3.min(c.values, function(d) { 
          return d.city;
        }); 
      }),
      d3.max(cities, function(c) { 
        return d3.max(c.values, function(d) { 
          return d.city;
        }); 
      })
    ]);



    defs.append("clipPath")
        .attr("id", "clip-above")
      .append("rect")
        .attr("width", width)
        .attr("height", y(1));

        area.y0(y(1));

    yAxis.tickValues(d3.scaleLinear()
        .domain(y.domain())
        .ticks(20));

    gY.transition().duration(durations).call(yAxis);

    gY.selectAll(".tick")
        .classed("tick--one", function(d) { return Math.abs(d - 1) < 1e-6; });

    g.selectAll(".axis.axis--x").transition()
      .duration(durations)
      .call(xAxis);

    // ========= Above Clip =========

    var above = g.selectAll(".above")
      .data(cities);

    above = above
      .enter()
    .append("path")
      .attr("clip-path", "url(#clip-above)")
      .attr("class", "area area--above above")
      .merge(above);

    above.transition()
      .duration(durations)
      .attr("d", function(d) {return area(d.values)} );

    // ========= Line Path =========

    var cityLine = g.selectAll(".cities")
      .data(cities);

    cityLine = cityLine
      .enter()
    .append("path")
        .attr("class", "line cities")
      .merge(cityLine);

    cityLine.transition()
      .duration(durations)
        .attr("d", function(d) { return line(d.values) });

    afterLoad();

});

在d3js v4中追加剪辑路径

1 个答案: