基于json的rect选择，并在选择的父本rect中追加rect

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创建的rect --意味着只有具有数据=A和B的rect才会被选中，然后在其中追加rect

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

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

<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>

我需要这个.

<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 I rect是否合法，但我们可以像这样在元素中追加元素

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