0

私はいくつかの d3 チュートリアルを実行しようとしているので、初心者の質問にはご容赦ください。私が理解しているように、特定のタイプの新しい要素を作成するには、.selectAll()存在しない要素を使用.append()してから作成する必要があります。指定されたセレクターに一致する既存の要素がない場合はうまく機能しますが、存在する場合は、その要素/それらの要素を選択し、それらの中に新しい要素を追加します。次の例を見てください。

d3.json("virusOrigins.json", function(dataset) {
    var w = 200;
    var h = 300;
    var barPadding = 1;
    var xScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function(d) { return d.value; })])
                    .rangeRound([5, w])
                    .nice();

    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h)

        // append base rectangle
        .append("rect")
        .attr("width", w)
        .attr("height", h)
        .attr("fill", "#ccc");
    svg.selectAll("rect.bars")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("y", function(d, i) {
            return i * (h / dataset.length);
        })
        .attr("x", 0)
        .attr("width", function (d) {
            return xScale(d.value);
        })
        .attr("height", function(d) {
            return (h / dataset.length) - barPadding;
        })
        .attr("fill", "#f33")
        .classed("bars", true);
});

これにより、次の HTML が生成されます。

<svg width="200" height="300">
    <rect width="200" height="300" fill="#ccc">
        <rect y="0" x="0" width="13" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="33.333333333333336" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="66.66666666666667" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="100" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="133.33333333333334" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="166.66666666666669" x="0" width="200" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="200" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="233.33333333333334" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
        <rect y="266.6666666666667" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
    </rect>
</svg>

動的に作成された四角形を基本四角形の兄弟にする方法を教えてください。

4

2 に答える 2

2

を保存しrectてsvgから追加しています。svg代わりに要素を保存するだけです:

var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

// append base rectangle
svg.append("rect")
    .attr("width", w)
    .attr("height", h)
    .attr("fill", "#ccc");
svg.selectAll("rect.bars")
    .data(dataset)
    .enter()
    .append("rect")
// etc
于 2013-11-14T19:33:56.533 に答える
1

データ挿入を次のように変更します。

svg.selectAll("rect.bars")
   .data(dataset, function(d){return d;}) <-- Here *
   .enter()
   .append("rect")
   ...
  • 既存の要素ではなく、実際に新しい要素を生成するためにすべてのデータを考慮に入れることを伝える関数を追加します。

詳細については、D3.js での selectAll、data、enter、append シーケンスの理解に関するこの記事の例 3を参照してください。

于 2013-11-14T19:32:28.207 に答える