D3.js 附加整个SVG元素或一系列元素
使用d3,将整个svg元素系列附加到特定选择的最佳方式是什么。例如…首先我附加一个rectD3.js 附加整个SVG元素或一系列元素,d3.js,D3.js,使用d3,将整个svg元素系列附加到特定选择的最佳方式是什么。例如…首先我附加一个rect tb.append("svg:rect") .attr("width", "18") .attr("height", "18") .attr("y", "9") .attr("x", (i * 20) + 5) .attr("rx", "4") .attr("ry", "4"); 现在根据选项
tb.append("svg:rect")
.attr("width", "18")
.attr("height", "18")
.attr("y", "9")
.attr("x", (i * 20) + 5)
.attr("rx", "4")
.attr("ry", "4");
现在根据选项,我想附加一个图标。图标可以是一系列路径、矩形或多边形。但它是动态的,并且基于选项。所以我想做一些类似的事情:
tb.append('<path d="M9.826,4.703C8.863,3.057,7.014,2.032,5.001,2.032c-2.012,0-3.861,1.024-4.829,2.671L0,5l0.173,0.299C1.141,6.944,2.99,7.968,5.001,7.968c2.012,0,3.862-1.023,4.825-2.669L10,5L9.826,4.703z M8.451,5.189C7.764,6.235,6.441,6.888,5,6.888c-1.438,0-2.762-0.652-3.453-1.698l-0.124-0.19l0.124-0.188C2.239,3.764,3.562,3.112,5,3.112c1.441,0,2.763,0.651,3.451,1.698l0.125,0.188L8.451,5.189z"/><circle cx="4.999" cy="5" r="1.905"/>');
tb.append(“”);
或
tb.append(“”);
但是我不知道元素的类型,也不知道输入时的不同属性。是否有一种模式可以将整个元素作为字符串插入?还是更好的模式?编辑:我刚刚键入了下面的答案,但在重新阅读您的问题时,我不确定您所说的“动态和基于选项”是否意味着图标类型取决于数据。如果我误解了,请告诉我,我将删除此答案
假设您有
dataArray
,它是组成数据的对象数组
然后你有:
var selection = d3.selectAll('.icon').data(dataArray)
然后,听起来您要求的是根据您的数据有条件地创建元素,例如
或
。理想情况下,你想要的——但d3不让你这么做——是:
selection.enter()
.append(function(d) { // <-- doesn't work :(
return d.type == 'round' ? 'circle' : 'rect';
})
.attr('class', 'icon');
您在DOM中得到的是这样的东西(当然取决于dataArray
中的内容):
编辑:我刚刚键入了下面的答案,但在重新阅读您的问题时,我不确定您所说的“动态和基于选项”是否意味着图标类型取决于数据。如果我误解了,请告诉我,我将删除此答案
假设您有
dataArray
,它是组成数据的对象数组
然后你有:
var selection = d3.selectAll('.icon').data(dataArray)
然后,听起来您要求的是根据您的数据有条件地创建元素,例如
或
。理想情况下,你想要的——但d3不让你这么做——是:
selection.enter()
.append(function(d) { // <-- doesn't work :(
return d.type == 'round' ? 'circle' : 'rect';
})
.attr('class', 'icon');
您在DOM中得到的是这样的东西(当然取决于dataArray
中的内容):
是的,我的意思是图标取决于数据。看起来这个可以用。我会处理它。是的,我的意思是图标取决于数据。看起来这个可以用。我将努力克服它。
<svg>
<g class="icon">
<circle>
</g>
<g class="icon">
<rect>
</g>
<g class="icon">
<rect>
</g>
<g class="icon">
<circle>
</g>