Question

我对d3很陌生，现在正在与一个问题争斗两周。

我的目标是将多个svg：foreignobjects（包含xhtml：divs）呈现到d3 globe上。 xhtml：div的内容/数据来自csv。初始设置到目前为止工作，所以当页面最初加载时，div（当前显示城市名称，从csv获取的城市位置）位于相应的正确位置。

enter image description here

但是当使用鼠标旋转地球时，xhtml：foreignobjects（或xhtml：divs）的位置会混乱： enter image description here

任何人都可以在这方面提供帮助，还是可以提示正确的方向？

代码：

<script>
var width = 960, height = 500, rotate = [ 0, 0 ], graticule = d3.geo.graticule();

var projection = d3.geo.orthographic().scale(width / (2 * Math.PI)).clipAngle(90);

var mercator = d3.geo.mercator().scale(width / (2 * Math.PI));

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

var m0, o0;

var cx, cy = {};
var svg;

var cities_csv;

var drag = d3.behavior.drag().on("dragstart", function() {
    d3.event.sourceEvent.stopPropagation();

    // Adapted from http://mbostock.github.io/d3/talk/20111018/azimuthal.html and updated for d3 v3
    var proj = projection.rotate();
    m0 = [ d3.event.sourceEvent.pageX, d3.event.sourceEvent.pageY ];
    o0 = [ -proj[0], -proj[1] ];
}).on(
    "drag",
    function() {

        if (m0) {
        var m1 = [ d3.event.sourceEvent.pageX, d3.event.sourceEvent.pageY ], o1 = [
            o0[0] + (m0[0] - m1[0]) / 4, o0[1] + (m1[1] - m0[1]) / 4 ];
        projection.rotate([ -o1[0], -o1[1] ]);
        }

        // Update the map
        path = d3.geo.path().projection(projection);
        d3.selectAll("path").attr("d", path);

        var group = svg.selectAll("g");

        //console.log(d3);

        d3.selectAll(".point").each(function(d, i) {


        console.log(d);

        d3.select("#f" + i).attr("x",
            projection([ d.coordinates[0], d.coordinates[1] ])[1]+200); 
        d3.select("#f" + i).attr("y",
            projection([ d.coordinates[0], d.coordinates[1] ])[0]-200);

        console.log("NR:" + i);


        });

    });

d3.select("svg").on("mousedown", function() {
    console.log("mouse: " + projection.invert(d3.mouse(this)));
});

svg = d3.select("#map").append("svg").attr("width", width).attr("height", height).call(drag).call(
    d3.behavior.zoom().on("zoom", redraw));

function redraw() {
    //Yet commented out because I just want to scale, not translate
    //svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
};

svg.append("defs").append("path").datum({
    type : "Sphere"
}).attr("id", "sphere").attr("d", path);

svg.append("use").attr("class", "stroke").attr("xlink:href", "#sphere");

svg.append("use").attr("class", "fill").attr("xlink:href", "#sphere");

svg.append("path").datum(graticule).attr("class", "graticule").attr("d", path);
svg.style("shape-rendering", null);

d3.json("world-110m2.json", function(error, data) {
    svg.insert("path", ".graticule").datum(topojson.feature(data, data.objects.countries))
        .attr("class", "land").attr("d", path);
});

d3.csv("cities.csv", function(error, data) {
    var cities_csv = data;
    data.forEach(function(d, i) {

    var group = d3.select("svg").append("svg:g").attr("class", "group").attr("id", "g" + i);

    var point = group.append("path", ".foreground").datum({
        type : "Point",
        coordinates : [ d['lon'], d['lat'] ]
    }).attr("class", "point").attr("id", "p" + i).attr("data-id", i).attr("d", path).on("click",
        function() {
            window.open("http://google.com");
        }).attr("r", 4).style("fill", "red");

    point.select("div").html('<a href= "http://google.com">' + // The first <a> tag
    (d.date) + "</a>" + // closing </a> tag
    "<br/>" + d.close);


    //check if location is clipped
    var clipped = false;
    clip_test_path = d3.geo.path().projection(projection);
    if (typeof (clip_test_path({
        type : "MultiPoint",
        coordinates : [ [ d.lon, d.lat ] ]
    })) === "undefined") {
        clipped = true
    }

    if (clipped == false) {
        group.append("foreignObject").attr("d", path).attr("id", "f" + i).attr("data-id", i).attr('class',
            'city').attr('width', '100px').attr('height', '100px').attr("x",
            projection([ d.lon, d.lat ])[0]).attr("y", projection([ d.lon, d.lat ])[1]).append(
            'xhtml:div').style("width", "20px").style("height", "20px").style("padding", "2px").html(
            "<small>" + d.city + "</small>");

    }

    });

});
</script>

Answer 1

我想我的工作方式与你期望的一样。

更新的代码是

var width = 960, height = 500, rotate = [ 0, 0 ], graticule = d3.geo.graticule();

var projection = d3.geo.orthographic().scale(width / (2 * Math.PI)).clipAngle(90);

var mercator = d3.geo.mercator().scale(width / (2 * Math.PI));

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

var m0, o0;

var cx, cy = {};
var svg;

var cities_csv;

var drag = d3.behavior.drag().on("dragstart", function() {
    d3.event.sourceEvent.stopPropagation();

    // Adapted from http://mbostock.github.io/d3/talk/20111018/azimuthal.html and updated for d3 v3
    var proj = projection.rotate();
    m0 = [ d3.event.sourceEvent.pageX, d3.event.sourceEvent.pageY ];
    o0 = [ -proj[0], -proj[1] ];
}).on(
    "drag",
    function() {

        if (m0) {
        var m1 = [ d3.event.sourceEvent.pageX, d3.event.sourceEvent.pageY ], o1 = [
            o0[0] + (m0[0] - m1[0]) / 4, o0[1] + (m1[1] - m0[1]) / 4 ];
        projection.rotate([ -o1[0], -o1[1] ]);
        }

        // Update the map
        path = d3.geo.path().projection(projection);
        d3.selectAll("path").attr("d", path);
        d3.selectAll("g").attr("d", path);


        var group = svg.selectAll("g");

        //console.log(d3);

        d3.selectAll(".point").each(function(d, i) {
            console.log(d);

            var clipped = false;

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

            if (typeof (clip_test_path({
                type : "MultiPoint",
                coordinates : [ [ d.coordinates[0], d.coordinates[1] ] ]
            })) === "undefined") {
                clipped = true
            }

            console.log(d, clipped)

            if (clipped) {
                d3.select("#f" + i).style("display", "none");
            } else {
                d3.select("#f" + i).style("display", null);
            }

            d3.select("#f" + i).attr("x",
                projection([ d.coordinates[0], d.coordinates[1] ])[0]); 
            d3.select("#f" + i).attr("y",
                projection([ d.coordinates[0], d.coordinates[1] ])[1]);

            console.log("NR:" + i);
        });

    });

d3.select("svg").on("mousedown", function() {
    console.log("mouse: " + projection.invert(d3.mouse(this)));
});

svg = d3.select("#map").append("svg").attr("width", width).attr("height", height).call(drag).call(
    d3.behavior.zoom().on("zoom", redraw));

function redraw() {
    //Yet commented out because I just want to scale, not translate
    //svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
};

svg.append("defs").append("path").datum({
    type : "Sphere"
}).attr("id", "sphere").attr("d", path);

svg.append("use").attr("class", "stroke").attr("xlink:href", "#sphere");

svg.append("use").attr("class", "fill").attr("xlink:href", "#sphere");

svg.append("path").datum(graticule).attr("class", "graticule").attr("d", path);
svg.style("shape-rendering", null);

d3.json("world-110m2.json", function(error, data) {
    svg.insert("path", ".graticule").datum(topojson.feature(data, data.objects.countries))
        .attr("class", "land").attr("d", path);
});

d3.csv("cities.csv", function(error, data) {
    var cities_csv = data;
    data.forEach(function(d, i) {

    var group = d3.select("svg").append("svg:g").attr("class", "group").attr("id", "g" + i);

    var point = group.append("path", ".foreground").datum({
        type : "Point",
        coordinates : [ d['lon'], d['lat'] ]
    }).attr("class", "point").attr("id", "p" + i).attr("data-id", i).attr("d", path).on("click",
        function() {
            window.open("http://google.com");
        }).attr("r", 4).style("fill", "red");

    point.select("div").html('<a href= "http://google.com">' + // The first <a> tag
    (d.date) + "</a>" + // closing </a> tag
    "<br/>" + d.close);

    group.append("foreignObject").attr("d", path).attr("id", "f" + i).attr("data-id", i).attr('class',
        'city').attr('width', '100px').attr('height', '100px').attr("x",
        projection([ d.lon, d.lat ])[0]).attr("y", projection([ d.lon, d.lat ])[1]).append(
        'xhtml:div').style("width", "20px").style("height", "20px").style("padding", "2px").html(
        "<small>" + d.city + "</small>");

    //check if location is clipped
    var clipped = false;
    clip_test_path = d3.geo.path().projection(projection);
    if (typeof (clip_test_path({
        type : "MultiPoint",
        coordinates : [ [ d.lon, d.lat ] ]
    })) === "undefined") {
        clipped = true
    }

    if (clipped) {
        d3.select("#f" + i).style("display", "none");
    }
    });

});

我所做的改变是：

在drag处理程序中，正确设置foreignObjects的位置。您已交换x和y位置的值，并且您还可以从预计的位置任意添加/减去200。

        d3.select("#f" + i).attr("x",
            projection([ d.coordinates[0], d.coordinates[1] ])[0]); 
        d3.select("#f" + i).attr("y",
            projection([ d.coordinates[0], d.coordinates[1] ])[1]);

在drag处理程序中，检查剪裁，如果剪切了该点，则隐藏foreignObject。我只是重复使用你以后用来检测剪辑的代码。

        var clipped = false;

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

        if (typeof (clip_test_path({
            type : "MultiPoint",
            coordinates : [ [ d.coordinates[0], d.coordinates[1] ] ]
        })) === "undefined") {
            clipped = true
        }

        console.log(d, clipped)

        if (clipped) {
            d3.select("#f" + i).style("display", "none");
        } else {
            d3.select("#f" + i).style("display", null);
        }

在处理foreignObjects初始添加的代码中，我将其更改为始终添加foreignObject，无论是否剪切，如果剪裁，请设置{{1} } display隐藏对象。
```
none
```

如何将svg组或foreignobject正确定位到d3 globe？

1 个答案: