Question

我在地图上工作（found here），即使用svg viewbox属性来缩放客户端的大小。

不幸的是，我正在使用的项目d3.geoAlbersUsa（）似乎没有正确地使用SVG的其余部分来扩展工具提示。如果客户端宽度是原始的960x500规格，它会突然将工具提示放在同一位置。

这是工具提示代码：

d3.tsv("CitiesTraveledTo.tsv",cityVisited, function(data) {
    var cities = svg.selectAll(".city")
        .data(data)
        .enter()
        .append("g")
        .classed("city",true);

        cities.append("line")
        .attr("x1", function(d) {
            return projection([d.Longitude, d.Latitude])[0];
        })
        .attr("x2", function(d) {
            return projection([d.Longitude, d.Latitude])[0];
        })
        .attr("y1", function(d) {
            return projection([d.Longitude, d.Latitude])[1]-pinLength;
        })
        .attr("y2", function(d) {
            return (projection([d.Longitude, d.Latitude])[1]);
        })
        .attr("stroke-width",function(d) {
            return 2;
        })
        .attr("stroke",function(d) {
            return "grey";
        });

        cities.append("circle")
        .attr("cx", function(d) {
            return projection([d.Longitude, d.Latitude])[0];
        })
        .attr("cy", function(d) {
            return projection([d.Longitude, d.Latitude])[1]-pinLength;
        })
        .attr("r", function(d) {
            return 3;
        })
        .style("fill", function(d) {
            if (d.Reason === "Work") {
                return "rgb(214, 69, 65)";
            }
            else if (d.Reason === "Fun") {
                return "rgb(245, 215, 110)";
            }
            else {
                return "rgb(214, 69, 65)";
            }
        })  
        .style("opacity", 1.0)  

        // Modification of custom tooltip code provided by Malcolm Maclean, "D3 Tips and Tricks" 
        // http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
        .on("mouseover", function(d) {
            div.transition()
                .duration(200)
                .style("opacity", .9);
            div.text(d.City + ", " + d.State)
                .style("left", function() {
                    var centerCircle = (projection([d.Longitude, d.Latitude])[0]);
                    return  (centerCircle-26) + "px";
                })     
                .style("top", function() {
                    var centerCircle = projection([d.Longitude, d.Latitude])[1];
                    var circleRadius = 3;

                    return ( centerCircle - circleRadius - 33-pinLength) + "px";
                });
            div.append("div").attr("class","arrow-down");
        })   

        // fade out tooltip on mouse out               
        .on("mouseout", function(d) {       
            div.transition()        
               .duration(500)      
               .style("opacity", 0);   
        });

我认为缩放也应该自动发生在工具提示中。错误。然后我尝试重置传递到投影的高度和宽度，但是没有用。什么是将元素绑定到数据的最佳方式＆＃34; d＆＃34;节点？

我问，因为对于这个节点，可能更容易说'＃34;给我这个元素，给我绑定的html元素＆＃34;，以便我可以设置工具提示相对于新的位置绑定元素的位置。

D3：获取与节点关联的html元素？

0 个答案: