D3 v4 및 D3plus가있는 원으로 텍스트 감싸기

D3 v4를 사용 중이고 D3plus가있는 원으로 텍스트를 감싸려고합니다. 두 가지 접근 방식을 시도했지만 나에게 도움이되는 것은 없습니다.D3 v4 및 D3plus가있는 원으로 텍스트 감싸기

첫번째 접근

난 https://bl.ocks.org/davelandry/a39f0c3fc52804ee859a에서 예를 채용.

형식 오류 : d3.scale이 정의되지

ReferenceError가 : d3plus가 정의되어 있지

나는이 오류를 얻을이 코드

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

: 이 내 코드의 필수적인 부분입니다 d3plus가 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 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();

대체

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

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

와
그러나 실제로 아무 일도 발생하지 않습니다. 텍스트는 이전과 동일하게 보입니다. 내가 제대로 예를 채택하는 방법을 몰라 27,260

:

형식 오류 : t이 d3.v4.min.js에서 정의되지 않는다 : 4

는 그리고이 오류가 발생합니다. 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가있는 원으로 텍스트 감싸기

답변

관련 문제