与更新/输入元素的互动
我想知道如何解决D3.js中的这个问题。下面的代码每5秒进入,更新或退出,并显示或消失数组dataset
中的随机数name
元素。该数组还包含id
元素。现在,我想点击屏幕上出现的更新元素,例如"foo"
,并且想要它的id
(表示1)在我单击"foo"
元素后显示。这个函数的名字叫testfunction
,但我认为这个函数有些不对。问题在于,原始name
文本在点击之后全部消失,并且出现新的id
文本。但我希望他们在使用click
函数之后都能在屏幕上希望你们中的一些人能够提供帮助。由于与更新/输入元素的互动
var svg = d3.select("body").append("svg");
var dataset = [{
name: "foo", id: "1"
}, {
name: "bar", id: "2"
}, {
name: "baz", id: "3"
}, ];
print(dataset);
setInterval(() => {
var data = dataset.slice(Math.random() * 6);
print(data);
}, 7000);
function print(data) {
var texts = svg.selectAll(".texts")
.data(data);
textsExit = texts.exit().remove();
textsEnter = texts.enter()
.append("text")
.attr("class", "texts");
textsUpdate = texts.merge(textsEnter)
.attr("x", 10)
.attr("y", (d, i) => 20 + i * 16)
.text((d,i) => "TextNumber" + (i+1) + ", name: " + d.name)
.on("click", testfunction);
function testfunction(){
textsUpdate
.attr("x", 200)
.attr("y", function(d, i) { return (490 + i * 28)})
.text(function(d, i) { return "IDNumber" + (i+1) + ", Name: "+ d.id})
};
}
如果我理解正确的话您的问题,这里的问题是,你改变你的textsUpdate
属性,当然变化textsUpdate
的文本位置(他们不这样做消失,虽然)的这将。
一种解决方案创造另一文本元素:
var svg = d3.select("body").append("svg");
var dataset = [{
name: "foo",
id: "1"
}, {
name: "bar",
id: "2"
}, {
name: "baz",
id: "3"
}, ];
var testText = svg.append("text")
.attr("x", 100)
.attr("y", 100);
print(dataset);
setInterval(() => {
var data = dataset.slice(Math.random() * 6);
print(data);
}, 7000);
function print(data) {
testText.text("");
var texts = svg.selectAll(".texts")
.data(data);
textsExit = texts.exit().remove();
textsEnter = texts.enter()
.append("text")
.attr("class", "texts");
textsUpdate = texts.merge(textsEnter)
.attr("x", 10)
.attr("y", (d, i) => 20 + i * 16)
.attr("cursor", "pointer")
.text((d, i) => "TextNumber" + (i + 1) + ", name: " + d.name)
.on("click", function(d, i) {
testfunction(d, i);
});
function testfunction(data, index) {
testText.text(function() {
return "IDNumber" + (index + 1) + ", Name: " + data.id
})
};
}
<script src="https://d3js.org/d3.v4.js"></script>
谢谢杰拉尔多。这很好,但我的目标是,新文本也随时更新。这意味着当我点击'“foo”'时,只会出现'“1”'。当我点击“吧”时。那么只会出现''2“'并且''1”'应该消失。这就是为什么我试图在'testfunction'中使用'textsUpdate'的原因。 –
检查新的片段。这是你想要的吗? –
你一如既往的大力帮助!谢谢 –
只是目测的话,我会怀疑这条线应该是'。对( “点击”,testfunction);'但我没有保证 – lucas
你是def。正确的。我刚刚编辑了代码和说明,因为仍然存在问题。非常感谢,卢卡斯! –