在D3.js中結合對象定位和標籤

我是D3js的新手，並且（可能愚蠢地）正在探索其作爲簡單導航工具的價值。 I have managed to cobble together a basic page that works，但它似乎相當詳細，我想知道是否有人有任何指示它可能會被重寫爲更優雅，並可能集成標籤和圓形繪圖功能？在D3.js中結合對象定位和標籤

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

來源

2013-03-22 geotheory

如果每個圓圈有一個標籤，則可以將兩個呼叫組合起來選擇圓圈和文本。也就是說，在同一個選擇上添加圓圈和標籤。

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-22 18:09:28

下面是一個工作示例：http：//bl.ocks.org/AndrewStaroscik/5223431 – 2013-03-22 18:15:16

熱銷bl.ocks！感謝chaps。 – geotheory 2013-03-22 19:04:29

在D3.js中結合對象定位和標籤

回答

相關問題