Javascript 基于json选择rect并在所选父rect内追加rect

这将创建双杠

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-意味着只有data=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>

我不确定rect中的rect是否合法，但我们可以像这样在元素中附加元素

---

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

您可以使用它来限制您的选择仅限于A和B s。但是，嵌套s无论如何都是无效的，所以我不确定你想实现什么。实际上，我已经创建了矩形，我想在其中创建另一个矩形，它的作用类似于绿色的垂直进度条，取决于频率高度不同，另一个矩形内的矩形不会渲染。kk，rect只是一个例子，我在DIV Thnx中使用了DIV作为信息：

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