d3.js визуализация JSON файл неисправности

Question

Я создаю визуализацию с помощью D3.js и использовал базовую основу из http://bl.ocks.org/mbostock/7607535

Этой визуализация читает в файле JSon только два значений ... одна строки значения и один инт. Для моей визуализации я хотел бы прочитать дополнительное строковое значение, которое появится в строке ниже. Тем не менее, у меня возникли проблемы с поиском, что мне нужно изменить в коде d3, чтобы это произошло

Вот мой d3 код:

d3.json("test.json", function(error, root) { 
    var focus = root, 
     nodes = pack.nodes(root); 

    svg.append("g").selectAll("circle") 
     .data(nodes) 
    .enter().append("circle") 
     .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) 
     .attr("r", function(d) { return (d.r); }) 
     .style("fill", function(d) { return d.children ? color(d.depth) : null; }) 
     .on("click", function(d) { return zoom(focus == d ? root : d); }); 

    svg.append("g").selectAll("text") 
     .data(nodes) 
    .enter().append("text") 
     .attr("class", "label") 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) 
     .attr("fill", "white") 
     .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; }) 
     .style("display", function(d) { return d.parent === root ? null : "none"; }) 
     .text(function(d) { return d.name; }); 

    d3.select(window) 
     .on("click", function() { zoom(root); }); 

    function zoom(d, i) { 
    var focus0 = focus; 
    focus = d; 

    var k = innerDiameter/d.r/2; 
    x.domain([d.x - d.r, d.x + d.r]); 
    y.domain([d.y - d.r, d.y + d.r]); 
    d3.event.stopPropagation(); 

    var transition = d3.selectAll("text,circle").transition() 
     .duration(d3.event.altKey ? 7500 : 750) 
     .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); 

    transition.filter("circle") 
     .attr("r", function(d) { return k * d.r; }); 

    transition.filter("text") 
     .filter(function(d) { return d.parent === focus || d.parent === focus0; }) 
     .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; }) 
     .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }) 
     .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; }); 
    } 
}); 

d3.select(self.frameElement).style("height", outerDiameter + "px"); 

</script> 

Answer 1

Не 100% уверен, что это то, что ваш клоню, но я подумайте, что вы, возможно, были близки с вашим комментарием Кристиан. Проблема с

svg.append("g") 
    .selectAll("text") 
    .data(nodes) 
    .enter() 
    .append("text") 
    .attr("class", "label") 
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) 
    .attr("fill", "white") .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; }) 
    .style("display", function(d) { return d.parent === root ? null : "none"; }) 
    .text(function(d) { return d.name; }) 
    .append("text") //this is the problem 
    .text(function(d) { return d.team; }); 

В приведенном выше коде вы добавляете текстовый элемент в другой текстовый элемент. Посмотрите на this. Откройте отладчик браузеров и проверьте элемент SVG. Вы должны увидеть что-то вроде:

<svg width="100" height="100"> 
    <text x="50" y="50" style="fill: #000000;"> 
     hello 
     <text x="50" y="75" style="fill: #000000;">hi!</text> 
    </text> 
</svg> 

Где то, что вы на самом деле хотел было что-то вроде

<svg width="100" height="100"> 
    <text x="50" y="50" style="fill: #000000;"> 
     hello 
    </text> 
    <text x="50" y="75" style="fill: #000000;">hi!</text> 
</svg> 

Надежда, что помогает!