javascript - 我可以用 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>')   

这样我就可以在其他地方(例如 Handlebars )创建一个复杂的模板，然后用数据编译它并附加它。

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 被描述为

Data Driven Documents

如果您使用的是 Handlebars 之类的东西，那么您就是在放弃 D3 设计的核心职责之一(从一些数据构建一些 DOM)并将其交给其他一些库。

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