使用D3 v4和D3plus將文本換成圓形

我使用D3 v4，並且想用D3plus將文本換成圓形。我正在嘗試兩種方法，但沒有爲我工作。使用D3 v4和D3plus將文本換成圓形

第一種方法

我從https://bl.ocks.org/davelandry/a39f0c3fc52804ee859a採用的例子。這是我的代碼的重要組成部分：

<head> 
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> 
    <script type="text/javascript" src="https://d3plus.org/js/d3plus.js"></script> 
</head> 

<body> 

    <div id="graphContainer" class="graphContainer"> 
    <svg width="960" height="600"></svg> 
    </div> 

    <script> 
    d3.json('licenseSmall.json', function(error, graph) { 
     if (error) throw error; 

     var nodeContainer = svg.append("g") 
     .attr("class", "nodeContainer"); 

     var node = nodeContainer.selectAll(".node") 
     .data(graph.nodes) 
     .enter().append("g") 
     .attr("class", "nodes") 
     .call(d3.drag() 
      .on("start", dragstarted) 
      .on("drag", dragged) 
      .on("end", dragended)); 

     var circle = node.append("circle") 
     .attr("r", 20) 
     .attr("fill", function(d) { return color(d.color); }); 

     node.append("text") 
     .attr("id", "text") 
     .attr("dx", -10) 
     .attr("dy", ".35em") 
     .attr("test-anchor", "middle") 
     .text(function(d) { return getText(d) }); 

     // Wrap text in a circle. 
     d3plus.textwrap() 
     .container(d3.select("#text")) 
     .draw(); 

    }); 
    </script> 

</body>

有了這個代碼，我得到2個錯誤：

類型錯誤：d3.scale是未定義

的ReferenceError：未定義d3plus

所以它看起來像D3是不適用於D3的V4 ...

然後，我發現這個職位https://groups.google.com/forum/#!topic/d3plus/WN2Ruj3kjPA ，並嘗試從鏈接的Github項目d3plus-text中獲取示例（對不起，我沒有足夠的信譽來發布鏈接）。

所以我改變了我的代碼：

老

<head> 
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> 
    <script type="text/javascript" src="https://d3plus.org/js/d3plus.js"></script> 
    </head>

新

<head> 
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> 
    <script src="https://d3plus.org/js/d3plus-text.v0.9.full.min.js"></script> 
    </head>

而在劇本我剛剛更換

// Wrap text in a circle. 
    d3plus.textwrap() 
     .container(d3.select("#text")) 
     .draw();

與

new d3plus.TextBox() 
     .data(d3.select("#text").data()) 
     .fontSize(16) 
     .width(200) 
     .x(function(d, i) { return i * 250; }) 
     .render();

但實際上什麼也沒有發生。文本看起來和以前一樣。

而且我得到這個錯誤：

類型錯誤：T是d3.v4.min.js未定義：4：27260

我不知道如何正確地採取例子。我沒有找到任何其他例子如何使用d3plus.TextBox（）

我做錯了什麼？

來源

2017-03-11 Mia

使用d3plus

d3plus.textwrap() 
 
    .container(d3.select("#your-div")) 
 
    .shape('circle') 
 
    .width(290) 
 
    .height(75) 
 
    .resize(true) 
 
    .draw();

來源

2017-12-22 19:30:03

使用D3 v4和D3plus將文本換成圓形

回答

相關問題