使用 D3 创建分级符号图答案

【问题标题】：Create a Graduated Symbol Map using D3使用 D3 创建分级符号图
【发布时间】：2013-08-01 11:11:32
【问题描述】：

我正在尝试创建graduated symbol map，并且正在努力寻找实现这一目标的方法。我可以创建饼图，我可以创建符号图，但是如何将饼图放置在地图上的特定坐标处？

我已成功地将比例符号放置在正确的坐标上，但我不知道如何用饼图替换符号。每次尝试都会给我留下一张空白地图。

我尝试将 Mike Bostock 的 Pie Multiples example 与他的 Symbol Map example 合并，但只是设法暴露了我对 d3 的数据和事件函数缺乏了解。

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Graduated Symbol Map</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
    <style type="text/css">

body {
text-align: center;
}

    </style>
</head>
<body>
    <script type="text/javascript">

var width = 400,
    height = 500;

var radius = d3.scale.sqrt()
    .domain([0, 5e5])
    .range([0, 40]);

// Define map projection
var projection = d3.geo.transverseMercator()
    .rotate([72.57, -44.20])
    .translate([175,190])
    .scale([12000]);

// Define path generator
var path = d3.geo.path()
    .projection(projection);

// Create SVG Element
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

queue()
    .defer(d3.json, "vermont.json")
    .defer(d3.json, "fed.json")
    .await(ready)

function ready(error, vt, centroid) {
    svg.append("path")
        .attr("class", "towns")
        .datum(topojson.feature(vt, vt.objects.vt_towns))
        .attr("d", path)
        .style("stroke", "#ddd")
        .style("stroke-width", "1px")
        .style("fill", "#ccc");

    svg.append("path")
        .datum(topojson.feature(vt, vt.objects.lake))
        .attr("d", path)
        .style("stroke", "#89b6ef")
        .style("stroke-width", "1px")
        .style("fill", "#b6d2f5");

    svg.selectAll(".symbol")
        .data(centroid.features.sort(function(a,b) {
            return b.properties.dollars - a.properties.dollars; }))
        .enter().append("path")
            .attr("class", "symbol")
            .attr("d", path.pointRadius(function(d) {
                return radius(d.properties.dollars); })
            )
            .style("fill", "#509e2f")
            .style("stroke", "#ddd")
            .style("fill-opacity", 0.7);
}

    </script>
</body>
</html>

fed.json（共有14个点，格式相同）

“美元”是四个组织花费的总美元，饼图的大小应该与这个值相关。

{
    "type": "Feature",
    "id": "53",
    "geometry": {
        "type": "Point",
        "coordinates": [-73.1349605, 43.0278745]
    },
    "properties": {
        "name": "Bennington County",
        "dollars": 79730,
        "unit": "county",
        "ECP": 49608,
        "LIP": 3451,
        "NAP": 0,
        "SURE": 26671
    }
},

vermont.json

大文件，地图不是问题。

我使用过的参考文献

【问题讨论】：

如果您查看多个饼图示例，您会注意到每个饼图都有一个单独的g 元素。这是实现你想要的东西的关键。对于这些g 元素中的每一个，您可以设置一个合适的transform 属性以将其移动到您想要的位置。它的坐标可以是数据的一部分。
@LarsKotthoff 嗯。我不能将d 属性设置为等于路径吗？我不熟悉transform 属性，不确定如何将一组坐标转换为必要的值。
使用您发布的previous answer 解决了这个问题！我会尽快发布我的确切解决方案。

标签： d3.js

【解决方案1】：

这是我的解决方案，使用来自this question 的@LarsKotthoff 的回答来解决投影问题。

我以一种相当老套的方式缩放了饼图。

index.html

下面只是准备好的功能。其他一切都保持不变。

function ready(error, vt, centroid) {
    svg.append("path")
        .attr("class", "towns")
        .datum(topojson.feature(vt, vt.objects.vt_towns))
        .attr("d", path)
        .style("stroke", "#ddd")
        .style("stroke-width", "1px")
        .style("fill", "#ccc");

    svg.append("path")
        .datum(topojson.feature(vt, vt.objects.lake))
        .attr("d", path)
        .style("stroke", "#89b6ef")
        .style("stroke-width", "1px")
        .style("fill", "#b6d2f5");

    var pieArray = [],
        pieMeta = [];

    function pieData() {
        for (var i=0; i<centroid.features.length; i++) {
            pieArray.push([
                parseInt(centroid.features[i].properties.ECP),
                parseInt(centroid.features[i].properties.LIP),
                parseInt(centroid.features[i].properties.NAP),
                parseInt(centroid.features[i].properties.SURE)
                ]);
            pieMeta.push([
                projection(centroid.features[i].geometry.coordinates),
                radius(parseInt(centroid.features[i].properties.dollars))
                ]);
        }
        return [pieArray, pieMeta];
    };

    var svgSvg = d3.select("body").select("svg").selectAll("g")
            .data(pieData()[0])
        .enter().append("svg:svg")
            .attr("width", width)
            .attr("height", height)
        .append("svg:g")
            .style("opacity", 0.8)
            .attr("property", function (d,i) {
                return pieData()[1][i][1];
            })
            .attr("transform", function (d,i) {
                var coordinates = pieData()[1][i][0];
                return ("translate(" + (coordinates[0]) + "," +
                    (coordinates[1]) + ")");
                });

    svgSvg.selectAll("path")
            .data(d3.layout.pie())
        .enter().append("svg:path")
            .attr("d", d3.svg.arc()
                .innerRadius(0)
                .outerRadius(function (d) {
                    var chartList = d3.select(this.parentNode).attr("property");
                    return chartList;
                }))
            .style("fill", function(d, i) { return color[i]; });

}

【讨论】：