d3과 함께 여러 svg 텍스트 추가

Question

나는이 문제에 며칠 동안 고생했습니다. 그래서

나는 다음과 같은 형식의 개체의 데이터 세트가 있습니다

이

dataset = [{metric:"revenue",value:0.03},{metric:"sales", value:0.15},{metric:"churn", value: 0.06},{metric:"logins", value: 0.45}] 

다음 코드는 4 격자 패턴 메트릭 이름 (그물코, meshx를 표시 할을 그리드와 meshsize의 좌표 점입니다입니다 격자의 크기, 그래서 이것은 단지 그리드 광장의 중앙에 텍스트를 가하고) :

svg.selectAll("text") 
    .data(dataset) 
    .enter() 
    .append("text") 
    .text(function(d){ 
     return d.metric; 
    }) 
    .attr("y",function(d,i){ 
     return meshy[i] + meshsize/2; 
    }) 
    .attr("x", function(d,i){ 
     return meshx[i] + meshsize/2; 
    }) 
    .attr("font-size",25) 
    .attr("font-family","serif") 
    .attr("text-anchor","middle") 
    .attr("font-weight","bold"); 

은 이제과 같이 메트릭 이름 아래에 메트릭 권리의 값을 넣어 싶습니다

그러나이 값은 FIRST 메트릭의 메트릭 이름 아래 값만 반환하며, 다른 3 값 텍스트는 DOM에도 없습니다. 나는 여기에 설명 된대로 .text를 .html로 대체하는 것을 포함하여 여러 접근법을 시도했다 : 성공이없는 https://github.com/mbostock/d3/wiki/Selections#wiki-html. 나는 또한 대신 단락 요소를 추가하려고 시도했다 -이 작동하지만 p 요소는 svg 본문 아래에 올바른 위치로 이동하는 확실한 방법이없는 목록에 배치됩니다. 위의 코드는 필자가 필요로하는 것과 가장 가깝지만, 어떤 이유로 든 첫 번째 값 텍스트 만 나타납니다. 그러나 d3에서 작업을 완료하는 방법에 대해 열려 있습니다. 바로 아래에있는 값이있는 4 개의 메트릭 이름

Answer 1

두 번째 코드 블록에서는 text 요소 하나만 추가하므로 하나만 있습니다. 나타납니다. 첫 번째 블록과 유사한 텍스트 (예 : .enter() 선택 사항)를 추가하면됩니다. 이를 위해 두 가지 선택이 있습니다. .enter() 선택 사항을 저장하고 다시 사용할 수도 있고 두 가지 종류의 텍스트를 구분할 수 있도록 다른 클래스를 할당 할 수도 있습니다.

옵션 1 :

var texts = svg.selectAll("text") 
       .data(dataset) 
       .enter(); 

texts.append("text") 
    .text(function(d){ 
        return d.metric; 
       }) 
    // set position etc. 

texts.append("text") 
    .text(function(d){ 
        return d.value; 
       }) 
    // set position etc. 

옵션 2 :

svg.selectAll("text.title") 
       .data(dataset) 
       .enter() 
       .append("text") 
       .attr("class", "title") 
       .text(function(d){ 
        return d.metric; 
       }) 
    // set position etc. 

svg.selectAll("text.value") 
       .data(dataset) 
       .enter() 
       .append("text") 
       .attr("class", "value") 
       .text(function(d){ 
        return d.value; 
       }) 
    // set position etc. 

첫 번째 옵션은 분명히 짧은,하지만 당신이 원하는 다른 내용에 따라, 두 번째 옵션은 바람직 할 수있다 - 경우 이후에 텍스트를 수정하고 싶다면 두 종류의 텍스트를 구별 할 수 있다면 훨씬 쉽습니다. 다른 클래스를 사용하여 다른 CSS 스타일을 부여 할 수도 있습니다.