在d3js v4中追加剪辑路径 [英] Appending clip path in d3js v4

问题描述

我正在尝试将旧的 v3 图表升级到 v4 ，并被困在尝试添加clipPath上.

I'm attempting to upgrade an old v3 chart to v4 and got stuck at trying to append clipPath.

起初，我认为附加剪辑路径的方式在v4中有所更改，但似乎与以前相同.

At first I thought that the way to append clip path was changed in v4 somehow but It appears to be the same as before.

我的参考是迈克·博斯托克(Mike Bostocks)图表.

然后> 这是 我所取得的进步到目前为止.

And here's the progress I've made so far.

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

One thing i've tried was basically to copy/paste the line path logic and change:

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

我没有从中得到任何错误，所以我不确定为什么它不起作用.

I get no errors from this so I'm not sure why it isn't working.

推荐答案

问题是在与剪切路径相同的环境中未计算y比例-将剪切路径的高度设置为0.更新功能的路径.您可能可以对剪切路径进行更优雅的更新，但是我在顶部添加了一行以删除现有的剪切路径，因此可以附加一个新的剪切路径:

The issue was that the y scale was not being calculated within the same environment as the clip path - giving the clip path a height of 0. I moved the clip path to the update function. You can probably get a more elegant update of the clip path, but I added a line at the top to remove the existing clip path so a new one could be appended: 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中追加剪辑路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！