2017-11-21 6 views
1

d3.js v3을 사용하여 분산 판에 주석을 구현하려고합니다. 내 차트의 텍스트 레이블을 클릭하면 텍스트 상자를 삽입하고 싶습니다. 내가이 코드를 작성한 곳 :데이터 레이블을 클릭 할 때 입력 텍스트 상자 추가 d3.js

circleGroup.selectAll("text") 
      .data(data) 
      .enter() 
      .append("text") 
      .text(function (d) { 
      if (d.label) { 
       return d.label; 
      } 
      return ""; 
      }) 
      .attr("x", function (d) { 
       return x(d.time) + 6; 
      }) 
      .attr("y", function (d) { 
       return y(d.plotY) + 4; 
      }) 
      .attr("font-size", "10px") 
      .attr("fill", "#2d3d45") 
      .on("click", function(d) { 
       d3.select(this).append("input").attr("type", "text").attr("name", "textInput").attr("value", "Text goes here"); 

      }); 

텍스트 요소 선택이 올바르게 작동합니다. 텍스트 레이블을 클릭하면 텍스트 상자가 터지지 않습니다. 내가 어디로 잘못 가고 있니? 나의 접근 방식이 올바른 방향이 아닌가?

답변

1

svghtml 요소를 추가 할 수 없습니다. 이를 수행하는 유일한 방법은 foreignObject 요소를 사용하는 것입니다.

foreignObject SVG 요소는 다른 사용자 에이전트에 의해 그려진 의 그래픽 컨텐츠를 갖는 외부 XML 네임 스페이스의 포함을 허용한다. 포함 된 외부 그래픽 콘텐츠는 SVG 변형 및 합성의 영향을받습니다. 아주 간단한 예에서

봐 : foreignObject 개념을 설명하기위한

var texts = ['foo', 'bar']; 
 

 
var container = d3.select('g'); 
 

 
container 
 
\t .selectAll('text') 
 
    .data(texts) 
 
    .enter() 
 
    .append('text') 
 
    .text(function(d) { return d; }) 
 
    .attr('y', function(d,i) { return 50 * i }) 
 
    .on('click', function(d,i) { 
 
    container 
 
     .append("foreignObject") 
 
     .attr("x", 0) 
 
     .attr("y", function() { return 50 * i }) 
 
     .attr("width", 140) 
 
     .attr("height", 20) 
 
     .html(function(d) { 
 
     return '<input type="text" value="Text goes here" />' 
 
     }) 
 
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div style="font-size: 12px;">Click on the texts below:</div> 
 
<svg width="300" heigth="400"> 
 
    <g transform="translate(20, 20)"> 
 
    </g> 
 
</svg>

+1

감사합니다. 그것은 작동합니다 :) – user2128