好的，可以做到...
选项 1 - 使用密钥
这是一种懒惰的方法......
Strategy
- 创建一个检测数据变化的关键函数。
通过读取节点属性字符串并将其与在数据上调用的属性生成器函数结果进行比较来完成此操作。
检测 d3 数据绑定过程的阶段（节点上的密钥或数据上的密钥）并为每个阶段使用不同的密钥：
var k = Array.isArray(this) ? lineD(d, lineFunc) : d3.select(this).attr("d");
在“数据密钥”阶段，通过从虚拟节点写入和读回来对齐两个密钥值的格式。 （这就是懒惰的部分！）
- 为更新、退出和输入选择保留单独的引用，以解耦它们的行为。
Code
var chart = d3.select("#my-div").append("svg")
.attr("height", 600)
.attr("width", 900);
var chartData = [];
chartData.push([{x: 1, y: 3}, {x: 2, y: 5}]);
chartData.push([{x: 1, y: 2}, {x: 2, y: 3}]);
var xRange = d3.scale.linear().range([50, 780]).domain([1, 5]);
var yRange = d3.scale.linear().range([380, 20]).domain([2, 9]);
var lineFunc = d3.svg.line()
.x(function (d) {
return xRange(d.x);
})
.y(function (d) {
return yRange(d.y);
})
.interpolate('linear');
chart.append('g').classed('lines', true).selectAll('path')
.data(chartData, key)
.enter().append('path')
.attr('d', function(d) {
return lineFunc(d);
})
.attr('stroke', 'black')
.attr('stroke-width', 1)
.attr('fill', 'none');
//updating data
chartData[1].push({x: 5, y: 5});
var update = chart.selectAll('g.lines').selectAll('path')
.data(chartData, key);
update.enter().append('path')
.attr('d', function (d) {
console.log('updating:');
console.log(d);
return lineFunc(d);
})
.attr('stroke', 'black')
.attr('stroke-width', 1)
.attr('fill', 'none');
update.exit().remove();
function key(d, i, j) {
var k = Array.isArray(this) ? lineAttr(d, lineFunc, "d") : d3.select(this).attr("d");
console.log((Array.isArray(this) ? "data\t" : "node\t") + k)
return k;
function lineAttr(d, lineFunct, attribute) {
var l = d3.select("svg").selectAll("g")
.append("path").style("display", "none")
.attr(attribute, lineFunct(d))
d = l.attr(attribute);
l.remove();
return d;
}
}
Output
node M50,328.57142857142856L232.5,225.71428571428572
node M50,380L232.5,328.57142857142856
data M50,328.57142857142856L232.5,225.71428571428572
data M50,380L232.5,328.57142857142856L780,225.71428571428572
updating:
Array[3]0: Object1: Object2: Objectlength: 3__proto__: Array[0]
选项 2 - 使用过滤器
这更有效，但仅适用于您知道只有线上的点数会改变且线数固定的情况。
Strategy
- 连接数据而无需key函数并通过比较进行过滤
从绑定数据计算出的属性字符串到 DOM 元素中的当前属性字符串。
- 与选项 1 一样，使用虚拟节点作为惰性（跨浏览器）方式来对齐节点属性和计算属性文本的格式。
Code
//updating data
chartData[1].push({x: 5, y: 5});
chart.selectAll('g.lines').selectAll('path')
.data(chartData)
.filter(changed)
.attr('d', function (d) {
console.log('updating:');
console.log(d);
return lineFunc(d);
})
.attr('stroke', 'black')
.attr('stroke-width', 1)
.attr('fill', 'none');
function changed(d) {
var s = d3.select(this);
console.log("data\t" + lineAttr(s.datum(), lineFunc, "d"));
console.log("node\t" + s.attr("d")); console.log("\n")
return lineAttr(s.datum(), lineFunc, "d") != s.attr("d");
function lineAttr(d, lineFunct, attribute) {
var l = d3.select("svg").selectAll("g")
.append("path").style("display", "none")
.attr(attribute, lineFunct(d))
d = l.attr(attribute);
l.remove();
return d;
}
}
Output
data M50,328.57142857142856L232.5,225.71428571428572
node M50,328.57142857142856L232.5,225.71428571428572
data M50,380L232.5,328.57142857142856L780,225.71428571428572
node M50,380L232.5,328.57142857142856
updating:
Array[3]
选项 3 - 两全其美
Strategy
- 使用标准更新/进入/退出模式。
- 在对其进行操作之前，过滤更新选择以形成“已更改”选择。
Code
//updating data
alert("base");
chartData[1].push({ x: 5, y: 5 });
updateViz();
alert("change");
chartData.push([{x: 3, y: 1}, {x: 5, y: 2}])
updateViz();
alert("enter");
chartData.shift();
updateViz();
alert("exit");
function updateViz() {
var update = chart.selectAll('g.lines').selectAll('path')
.data(chartData),
enter = update.enter()
.append('path')
.attr('d', function (d) {
return lineFunc(d);
})
.attr('stroke', 'black')
.attr('stroke-width', 1)
.attr('fill', 'none'),
changed = update.filter(changed)
.attr('d', function (d) {
console.log('updating:');
console.log(d);
return lineFunc(d);
});
update.exit().remove();
function changed(d) {
var s = d3.select(this);
console.log("data\t" + lineAttr(s.datum(), lineFunc, "d"));
console.log("node\t" + s.attr("d")); console.log("\n")
return lineAttr(s.datum(), lineFunc, "d") != s.attr("d");
function lineAttr(d, lineFunct, attribute) {
var l = d3.select("svg").selectAll("g")
.append("path").style("display", "none")
.attr(attribute, lineFunct(d))
d = l.attr(attribute);
l.remove();
return d;
}
}
}
背景
Read this https://github.com/mbostock/d3/wiki/Selections#data
