Question

我使用D3.js和Leaflet，我想用不同颜色设置每个圆圈的样式。我有函数谁检查一个变量值，并根据该变量返回该圆的填充颜色。它在此代码后只显示一个圆圈而不是所有数组（点）：

 map._initPathRoot();

var svg = d3.select("#map").select("svg"),
    g = svg.append("g");
 var feature = g.selectAll("circle")
            .data(points)
            .enter().append('svg')
            .each(function (d, i) {        
                   d3.select(this).selectAll('circle')
                        .data([d])
                        .enter()
                        .append('circle')
                        .attr('r', 10)
                        .attr('stroke', 'white')
                        .attr('stroke-width', 1)
                        .attr('opacity', 0.8)
                        .style('fill', getFeatureColor(d)) //returns "red"  
            });
map.on("viewreset", update);
        update();

        function update() {
            feature.attr("transform",
                function (d) {
                    if (d !== undefined) {
                        return "translate(" +
                            map.latLngToLayerPoint(d.LatLng).x + "," +
                            map.latLngToLayerPoint(d.LatLng).y + ")";
                    }
                }
            )

        }
function getFeatureColor(d) {
        if(d.count>20) {
           return "red";
        }
        else {return "blue"}
}

Answer 1

我认为，不需要额外的SVG元素并对数据进行两次迭代。您可以使用点阵列直接创建圆圈，如下所示。

希望这有帮助。

var feature = g.selectAll("circle")
  .data(points)
  .enter()
  .append('circle')
  .attr('r', 10)
  .attr('stroke', 'white')
  .attr('stroke-width', 1)
  .attr('opacity', 0.8)
  .style('fill', function(d){ return getFeatureColor(d) });

如何将d3.js选为独立元素？

1 个答案: