Question

我想在d3地图上放置多个饼图，但我很困惑如何去做。

我是d3的noob所以我搜索了这个问题，并在下面编写代码。

有人建议我做两个单独的svgs，所以我做了。

有两个svgs。一个有地图，另一个有多个饼图。

现在我在地图上映射这些馅饼时遇到问题。

我不知道如何用地理坐标映射这些馅饼......

这只是浏览器（？）坐标所以我想改变它。

我希望用馅饼正确缩放和平移地图......

希望你的帮助......

摘要

我有两个问题

在右侧地图上放置多个饼图

正确缩放和平移

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
    var width = 960, height = 500;

    var projection = d3.geo.mercator().center([ 127.46, 36.00 ])
            .scale(4000).translate([ width / 2, height / 2 ]);

    var color = d3.scale.category20();

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

    var path = d3.geo.path().projection(projection);

    var radius = 30;

    var arc = d3.svg.arc().innerRadius(radius - 100).outerRadius(
            radius - 20);
    var g = svg.append("g");

    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", "/tourdata.txt", false);
    var allText;
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                allText = rawFile.responseText;
            }
        }
    }

    rawFile.send(null);

    var lines = allText.split('\n');

    var timeTable = new Array();
    var res = lines[0].split(", ");
    var currentTime = res[1];
    var currentDate = res[0];

    var timeInformation = new Array();
    var corInformation = new Array();
    var timeCorTable = new Array();

    for ( var i = 0; i < lines.length; i++) {
        var res = lines[i].split(", ");

        if (currentDate != res[0] || currentTime != res[1]) {
            currentDate = res[0];
            currentTime = res[1];
            timeTable[currentDate + ":" + currentTime] = timeInformation;
            timeCorTable[currentDate + ":" + currentTime] = timeCorTable;
            timeInformation = new Array();
            corInformation = new Array();
        }

        if (timeInformation[res[2] + "," + res[3]] == undefined) {
            corInformation.push(res[2] + "," + res[3]);
            timeInformation.push([ res[4], res[5], res[6], res[7], res[8],
                    res[9], res[10], res[11], res[12], res[13] ]);
        }
    }

    timeTable.push(timeInformation);
    timeCorTable.push(corInformation);

    var data = timeTable;
    console.log(timeCorTable[0]);
    // load and display the World
    d3.json("kor.json",
            function(error, topology) {
                // load and display the cities
                var geo = topojson.object(topology,
                        topology.objects['kor.geo']).geometries;
                g.selectAll('path').data(geo).enter().append('path').attr(
                        'd', path)
            });

    console.log(data[0]);

        //second svg that has multiple pies
    var svgSvg = d3.select("body").select("svg").selectAll("g").data(timeTable[0]).enter().append("svg:svg").attr(
            "width", width).attr("height", height).append("svg:g").style(//svg:g make pie group
            "opacity", 0.8).attr("transform", function(d, i) {
        var split = timeCorTable[0][i].split(",");
        //console.log(split[0]);
        var point = [split[0], split[1]];
        console.log(projection(point[0], point[1])[0]); 
        return ("translate(" + projection(point[0], point[1])[0] + "," + projection(point[0], point[1])[1] + ")");
    });

    svgSvg.selectAll("path").data(d3.layout.pie()).enter().append(
            "svg:path").attr("d",
            d3.svg.arc().innerRadius(10).outerRadius(30)).style("fill", function(d, i) { return color(i); });



    // zoom and pan
    var zoom = d3.behavior.zoom().on(
            "zoom",
            function() {
                g.attr("transform", "translate("
                        + d3.event.translate.join(",") + ")scale("
                        + d3.event.scale + ")");
                g.selectAll("path").attr("d", path.projection(projection));
                svgSvg.attr("transform", "translate("
                        + d3.event.translate.join(",") + ")scale("
                        + d3.event.scale + ")");
            });

    svg.call(zoom)
</script>

d3将多饼图放在地图上

0 个答案: