Question

我是D3js的新手，并且（可能是愚蠢的）正在探索它作为一个简单的导航工具的价值。我have managed to cobble together a basic page that works，但它似乎相当冗长，我想知道是否有人有任何指示如何重新设计更优雅，并可能整合标签和圆形图功能？

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <script type="text/javascript" src="scripts/d3.v3.js"></script>
</head>
<body>
    <div id="viz"></div>
    <div id="status" style="position:fixed;bottom:0;left:0;
        color:white;background-color:grey;font-size:small"></div>
    <script type="text/javascript">

    // functions for adding a 'status' box with link info
    function addStatus(targetURL){document.getElementById('status').innerHTML=targetURL;}
    function clearStatus(){document.getElementById('status').innerHTML=null;}

    var sampleSVG = d3.select("#viz")
        .append("svg")
        .attr("width", 500)
        .attr("height", 200);

    var dataset =  [[100, 100, "http://google.com/", "Google"],
                    [300, 100, "http://yahoo.com/", "Yahoo"]];

    // Add labels
    sampleSVG.selectAll("text")
        .data(dataset)
        .enter().append("text")
        .attr("text-anchor", "middle")
        .attr("x", function(d){return d[0]})
        .attr("y", function(d){return d[1]})
        .text(function(d) {return d[3];});

    // Add circles and functionality
    sampleSVG.selectAll("circle")
        .data(dataset)
        .enter().append("circle")
        .style("fill", "transparent")
        .style("stroke", "grey")
        .style("stroke-width", 3)
        .attr("r", 50)
        .attr("cx", function(d){return d[0]})
        .attr("cy", function(d){return d[1]})
         .on("mouseover", 
             function(d){ d3.select(this).style("stroke", "black");
             addStatus(d[2]); }
             )
         .on("mouseout", 
             function(){
                 d3.select(this).style("stroke", "grey");
                 clearStatus(); } )
        .on("mouseup", function(d){window.location = d[2];});


    </script>
    <!-- ... -->
</body>
</html>

Answer 1

如果每个圆圈有一个标签，您可以将两个调用结合起来选择圆圈和文字。也就是说，在同一选择中添加圆圈和标签。

var sel = sampleSVG.selectAll("text")
    .data(dataset)
    .enter();
sel.append("text")
   ...
sel.append("circle")
   ...

你甚至可以在一个调用链中完成所有工作。

sampleSVG.selectAll("text")
    .data(dataset)
    .enter()
    .append("circle")
    ...
    .append("text");

这会将text元素附加到circle元素，但可能无法在所有情况下生成所需的结果（特别是对于事件处理程序）。

除此之外，d3不提供开箱即用的任何功能，同时放置形状和标签。虽然有NVD3这样的库可以为它提供功能。

编写自己的包装函数可能最容易，在给定数据的情况下，可以按照您想要的方式附加形状和标签。

在D3.js中组合对象定位和标注

1 个答案: