0

我是 D3js 的新手，并且（可能是愚蠢地）正在探索它作为简单导航工具的价值。我已经设法拼凑出一个可以工作的基本页面，但它似乎相当冗长，我想知道是否有人有任何指示如何将它重新设计为更优雅并可能集成标签和圆形绘图功能？

<!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>
4

1 回答 1

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）为此提供了功能。

编写自己的包装函数可能是最简单的，给定数据，以您想要的方式附加形状和标签。

于 2013-03-22T18:09:28.380 回答