基于json选择rect并在选定的父rect内添加rect

现在，将通过此JSON

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

具有基于bar_data.name选择上面创建rects - 意味着只有具有数据 =甲乙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>

我需要这个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>

来源

2014-07-07 Suyog Sawant

你可以使用[''d3.filter']（https://github.com/mbostock/d3/wiki/Selections#filter）来限制你的选择只有A和B''s。但是，嵌套''无论如何都是无效的，所以我不确定你想要完成什么。 – mdml

实际上，我已经创建了rects，其中我想创建另一个矩形，其行为像绿色的垂直进度条，取决于高度将会不同的频率 –

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

我也不肯定矩形是否矩形内是合法与否，但我们可以追加元素内元素这样的

这将选择每个酒吧，并将追加rect里面 - 这是我的要求

来源

2014-08-12 07:35:27

另一个矩形内的矩形不会渲染。 –

kk，rect只是一个例子，我已经在DIV Thnx中使用DIV了解信息:) –

基于json选择rect并在选定的父rect内添加rect

回答

相关问题