Question

这将创建双杠。

var bars = "ABCDEFGHIJ".split("");
var svg = d3.select("body").append("svg").attr("height", "800").attr("width", "800");
var bars_section = svg.selectAll("rect").data(bars).enter().append("rect").attr("x", function(d, i){ 
    return i * 25 + 10; 
}).attr("width", "25").attr("height", "100").text(function(d){ 
    return d; 
}).attr("stroke", "black").attr("stroke-width", "3").attr("data-attr", function(d){  
    return d;
});

现在，将传递此JSON

var bar_data = [
    { name: "A", frequency: .08167 },
    { name: "B", frequency: .01492 },
];

必须根据bar_data.name选择上面创建的rects - 意味着只有具有数据的矩形= A和B将被选中，然后在其中添加rect

bars_section.selectAll("rect").data(bar_data, function(d){ 
    return d.name 
}).enter().append("rect").text(function(d){ 
    return d.name;  
});

从第一个条形图创建代码 - o / p是this =

<svg height="800" width="800"> 
    <rect x="10" width="25" height="100" stroke="black" stroke-width="3" data-attr="A">A</rect>
    <rect x="35" width="25" height="100" stroke="black" stroke-width="3" data-attr="B">B</rect>
    <rect x="60" width="25" height="100" stroke="black" stroke-width="3" data-attr="C">C</rect>
    <rect x="85" width="25" height="100" stroke="black" stroke-width="3" data-attr="D">D</rect>
    <rect x="110" width="25" height="100" stroke="black" stroke-width="3" data-attr="E">E</rect>
    <rect x="135" width="25" height="100" stroke="black" stroke-width="3" data-attr="F">F</rect>
    <rect x="160" width="25" height="100" stroke="black" stroke-width="3" data-attr="G">G</rect>
    <rect x="185" width="25" height="100" stroke="black" stroke-width="3" data-attr="H">H</rect>
    <rect x="210" width="25" height="100" stroke="black" stroke-width="3" data-attr="I">I</rect>
    <rect x="235" width="25" height="100" stroke="black" stroke-width="3" data-attr="J">J</rect> 
</svg>

我需要这个o / p： -

<svg height="800" width="800"> 
    <rect x="10" width="25" height="100" stroke="black" stroke-width="3" data-attr="A">A
      <rect>A<rect>
    </rect>
    <rect x="35" width="25" height="100" stroke="black" stroke-width="3" data-attr="B">B
      <rect>B</rect>
    </rect>
    <rect x="60" width="25" height="100" stroke="black" stroke-width="3" data-attr="C">C</rect>
    <rect x="85" width="25" height="100" stroke="black" stroke-width="3" data-attr="D">D</rect>
    <rect x="110" width="25" height="100" stroke="black" stroke-width="3" data-attr="E">E</rect>
    <rect x="135" width="25" height="100" stroke="black" stroke-width="3" data-attr="F">F</rect>
    <rect x="160" width="25" height="100" stroke="black" stroke-width="3" data-attr="G">G</rect>
    <rect x="185" width="25" height="100" stroke="black" stroke-width="3" data-attr="H">H</rect>
    <rect x="210" width="25" height="100" stroke="black" stroke-width="3" data-attr="I">I</rect>
    <rect x="235" width="25" height="100" stroke="black" stroke-width="3" data-attr="J">J</rect> 
</svg>

Answer 1

bars_section.append("rect").attr("class","inner_rect")

我不确定 rect 内的 rect 是否合法，但我们可以在元素中添加元素喜欢这个

这将选择每个栏，并在其中附加 rect - 这是我的要求

选择基于json的rect并在选定的父rect中附加rect

1 个答案: