我正在尝试用D3做一些简单的文本框,并使用另一个问答,所以我想我需要使用foreignObject并将文本包装在一个div中。一切都很好。然后,我想要做的是通过单击其他内容来更新文本。我可以更新文本本身,但不能更新文本的大小或颜色。这是不对的。这是我的代码。
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//add some text for clicking
我有一个d3.js图,它是由一系列对象组成的,例如:
svg.selectAll(".circ").data(dataArr) // dataArr is my array of objects
.enter().append("circle")
.attr("cy", function (d) {
return d.y
})
.attr("cx", function (d) {
return d.x
})
.attr("r", ele
问题
我正在ForeignObject中创建一些svg图标和一个选择框,以对图表的时间线进行操作。svg包含要将图形设置为的预设日期范围。在进行此操作时,我发现在某些浏览器中,更改复选框将无法正确更新<option>。您将更改svg,但在某些鼠标事件发生之前,内容不会更改。
我的HTML结构如下:
body
svg
defs
svg
g icon
svg
g icon
svg
g icon
svg
g icon
svg
g
我有一个使用d3.js和svg表示的网格。我想做的是改变瓷砖的颜色和所有相邻的瓷砖时,该瓷砖被点击。我想知道选择与单击的瓷砖相邻的最佳方法。到目前为止我的代码是:
var w = 960,
h = 500,
z = 20,
x = w / z,
y = h / z;
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect"
我有下面的代码,它允许我在单击圆圈时增加它的大小。我想添加一个过渡效果,但它不起作用:
D3.js
d3.selectAll(".bubble-node")
.on("click", function (d) {
$("#circle-" + d.id).transition().duration(1000).attr("r", r);
d.forceR = r; // forceR is a property on the data object
});
HTML/svg
<