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

回答

相關問題