Question

我继承了一个使用d3.js的项目，其中一个图表是折线图;我不得不对它做了很多改动，一个是添加网格线，我这样做是这样的：

grid_wrap = plot.append('g').classed('grid-wrapper', true);

//......

chart = function() {

    //.....

    valueScale.domain([0, settings.value_scale_max]).range([plot_height, 0]);

    grid_wrap.append("g")
    .attr("class", "grid")
    .attr("width", grid_width)
    .call(make_y_axis(valueScale)
        .tickSize(-grid_width)
        .tickFormat("")
    );

    //.....

}

注意上面的chart函数会在重绘时被调用。

function make_y_axis(valueScale) {
    return d3.axisLeft()
   .scale(valueScale)
   .ticks(5);
}

现在，这会很好地绘制网格线，但是每当调整窗口大小时，它都会使用resize事件触发器来重绘图形，但是当其他所有内容重新绘制时，我的网格线反而会一遍又一遍地重复有几个.grid元素。

我检查了其他代码是如何处理的，我这样理解：

图表上还有这些阈值元素，它们是以这种方式构建的：

thresholds = plot.append('g').classed('thresholds', true);

chart = function() {

    //.....

    valueScale.domain([0, settings.value_scale_max]).range([plot_height, 0]);

    thresholds = plot.select('.thresholds').selectAll('.threshold').data(chart.Thresholds);

使用数据填充阈值元素。

new_thresholds = thresholds.enter().append('g').attr('class', 'threshold');

现在，据我所知，thresholds在第一次抽奖时不会包含任何元素，但重绘时会包含已存在的元素。

然后

new_thresholds将处理此数据并添加所需的新 .threshold元素以匹配数据集中所需的金额，因为我们使用的是enter函数这里。

new_thresholds.append('rect').classed('threshold-rect', true).attr('x', 0).attr('y', 0).attr('width', plot_width);

向我们新创建的元素添加元素。

thresholds.exit().remove();

然后据我了解，这会删除与我们提供的数据集相比过多的额外元素吗？

    //.....

}

所以我猜我要问的是，如何在网格线上实现相同的功能，因为它不能处理数据集？

Answer 1

我在思考它，我所要做的只是添加：

grid_wrap.selectAll('.grid').remove();

以上代码......

grid_wrap.append("g")
.attr("class", "grid")
.attr("width", grid_width)
.call(make_y_axis(valueScale)
    .tickSize(-grid_width)
    .tickFormat("")
);

这样可以确保之前删除任何网格线，因此当它们被创建时，它最终只会出现在那里。

在d3.js中重新绘制折线图上的网格线（删除并重绘）

1 个答案: