如何在d3中添加不同的形状标记？

我尝试在D3 svg，中添加不同的形状大小标记（例如，三角形，矩形，圆形），例如，如果级别为admin，则标记形状为圆形如果级别为成员，标记形状为三角形如果级别为客人，标志的形状为矩形我尝试使用gooup.each如何在d3中添加不同的形状标记？

var groups = svg 
    .style("overflow", "visible") 
    .selectAll("g") 
    .data(data) 
    .enter() 
    .append("g") 
    .attr("transform", function(d) {return "translate(" + projection([d.lon,d.lat])+ ")";}); 

groups.each(function(d) { 
var elem = d3.select(this); 

    if (d.level == "admin") { 

    elem.append("rect").attr("width", 5).attr("height", 5) 
    .style("fill",function() { 
    return "red"; 
    }); 
    } 
if (d.level == "member") { 
elem.append("path").attr("d", 'M 100 100 L 300 100 L 200 300 z').attr('transform','scale(0.04) translate(-150,-130)') 
    .style("fill",function() { 
    return "green"; 
    }); 
    } 
if (d.level == "guest") { 
elem.append("circle").attr("r", 4).attr('cy',2).attr('cx',2)   
.style("fill",function() {return "yellow";}); 
    } 
});

但它不能显示从数据阵列的第一个数据，

从my code，你可以看到，它的无法显示数据数组中的第一个数据，但我不知道如何修改。我非常感谢你的帮助！

来源

2017-07-15 georgetovrea

见本QA：https：//stackoverflow.com/questions/18205034/d3-adding-data-attribute-conditionally –

另外：[*“如何直接使用数据注入到d3选择器通过.data？”]（/ q/39278704 ）。 – altocumulus

您可以附加团体g - 元素的SVG，环比那个群体和不同的形状追加到它

看看摘录下来

<div id='graphContent'></div> 
 
    
 
    <script src='https://d3js.org/d3.v4.min.js'></script> 
 

 
    <script> 
 
    var selector = "#graphContent"; 
 

 
var data = [{ level: "admin" }, { level: "admin" },{ level: "member" }, { level: "guest" },{ level: "admin" }]; 
 

 
var groups = d3 
 
    .select("#graphContent") 
 
    .append("svg") 
 
    .style("overflow", "visible") 
 
    .selectAll("g") 
 
    .data(data) 
 
    .enter() 
 
    .append("g") 
 
    .attr("transform", (d, i) => `translate(0,${i * 20})`); 
 

 
groups.each(function(d) { 
 
    var elem = d3.select(this); 
 

 
    if (d.level == "admin") { 
 
    //rectangle 
 
    elem.append("rect").attr("width", 5).attr("height", 5); 
 
    } 
 
    if (d.level == "member") { 
 
    //triangle 
 
    //svg does not have triangle shape , so we use path to draw it 
 
    elem.append("path").attr("d", 'M 100 100 L 300 100 L 200 300 z').attr('transform','scale(0.04) translate(-150,-130)') 
 
    } 
 
    if (d.level == "guest") { 
 
    //circle 
 
    elem.append("circle").attr("r", 4).attr('cy',2).attr('cx',2); 
 
    } 
 
}); 
 
    </script>

来源

2017-07-15 14:01:24 bumbeishvili

我已经按照你所说的修改了我的代码，但仍然无法工作。你可以从http://jsfiddle.net/mattcrawfoord/Lzya029a/看到我的代码。但我不知道如何修改。我非常感谢你的帮助！ – georgetovrea

这里是更新小提琴http://jsfiddle.net/Lzya029a/1/你是第二次追加svg，我也建议设置不同的颜色，以不同的水平 – bumbeishvili

也，我有小提琴的css，请看看那也 – bumbeishvili

如何在d3中添加不同的形状标记？

回答

相关问题