我可以用d3附加一个文字SVG元素吗？

Question

我想用d3附加一个文字SVG元素.

所以不要写作

svg.selectAll("circle")            
    .data(data)                    
    .enter()                       
    .append("circle")    // etc etc

我想这样做:

svg.selectAll("circle")            
    .data(data)                    
    .enter()                       
    .append('<circle cx="158.9344262295082" cy="200" r="16" fill="red"></circle>')   

这样我就可以在别处创建一个复杂的模板(例如用把手),然后用数据编译并附加它.

Answer 1

您可以执行此操作，但不能通过该selection.append()函数执行。相反，您需要使用selection.html()函数。

这将使其在数据连接的上下文中使用起来非常困难，但并非不可能。这可能是您能做的最好的事情，这涉及向 DOM 添加一个额外的 svg 组，这无论如何都不是坏事：

var svg = d3.selectAll("svg");
svg.selectAll("circle")            
       .data([50, 100, 150])                    
       .enter()                       
       .append("g")
       .attr("transform", function(d) { return "translate(" + [d, d] + ")"; })
       .html('<circle r="16" fill="red"></circle>');   

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="500"></svg>

我想更进一步一点，您实际上可以将您希望直接渲染的结果嵌入到您的data对象中。所以你添加了一些看起来像这样的代码：

.html(function(d) { return d.templatedHTML; });

然而此时停下来问问自己这个问题：“我用 D3 做什么？”。D3被描述为

数据驱动文档

如果您使用的是像把手之类的东西，那么您将带走 D3 设计的核心职责之一（从某些数据构建一些 DOM）并将其交给其他一些库。

我并不是说你不应该这样做（因为你确实提到了复杂的模板），而是问自己这个问题，以确保这是一条你希望走的路。