D3 SVG 등록에 텍스트 추가

D3 SVG 등록에 텍스트 추가

---

여러 줄 도구 설명을 제공하기 위해 D3의 사각형에 html을 추가합니다. 하단 부분은 문제를 추가하는 방법입니다. 맨 위는 내 세계에서 작동해야하는 코드입니다.

 newRect.().html(" <textArea font-family=Verdana font-size=20 fill=blue > Test " + "</br>" + "Test2 </textArea>");

SVG에 텍스트 필드를 삽입하지만 표시되지 않습니다.
HTML :

<rect id="rectLabel" x="490" y="674" width="130" height="160" fill="red">
    <textarea fill="blue" font-size="20" font-family="Verdana"> Test </br>Test2 </textarea>
</rect>

다음을 실행하는 기능 위에 마우스가 있습니다.

    newRect = svg.append("rect")
    .attr("x", xCor)
    .attr("y", yCor)
    .attr("width", 130)
    .attr("height", 160)
    .attr("fill", "red")
    .attr("id", "rectLabel");

나는 제안해야 할 생각하지만 작동하지 않습니다. 추가하려는 g.node 만 제거합니다.

    newRect = $(this).enter().append("rect")
    .attr("x", xCor)
    .attr("y", yCor)
    .attr("width", 130)
    .attr("height", 160)
    .attr("fill", "red")
    .attr("id", "rectLabel");

질문 : 왜 내 텍스트가 실제적인 질문입니까? .html, .textArea를 시도했습니다. 여러 줄 레이블이 필요에 따라 .text가 작동하지 않을 것입니다. 또한 사각형을 어떻게 추가해야합니까?

---

A rect는 text요소를 포함 할 수 없습니다 . 대신 g텍스트와 사각형의 위치로 요소를 모두 변형 한 다음 사각형과 텍스트를 추가합니다.

var bar = chart.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 1);

bar.append("text")
    .attr("x", function(d) { return x(d) - 3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d; });

http://bl.ocks.org/mbostock/7341714

여러 줄 레이블도 약간 까다 롭습니다 . 이 랩 기능 을 확인하는 것이 좋습니다.

---

SVG 텍스트 요소 를 구경하세요 ?

.append("text").text(function(d, i) { return d[whichevernode];})

rect 요소는내부에 텍스트 요소를허용하지 않습니다. 설명 요소 (<desc>, <metadata>, <title>) 및 애니메이션 요소 (<animate>, <animatecolor>, <animatemotion>, <animatetransform>, <mpath>, <set>)만 허용됩니다.

텍스트 요소를 형제로 추가하고 위치 지정 작업을합니다.

최신 정보

g 그룹화를 사용하면 이런 식으로 어떻습니까? 깡깡이

추가 할 수있는 CSS 클래스로 로직을 이동하고 그룹 (this.parentNode)에서 제거 할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/20644415/d3-appending-text-to-a-svg-rectangle