2

各長方形に画像を含む積み上げ棒グラフを作成しようとしていますが、本文に個別に画像を作成していました。誰か助けてください。私のコードの出力は、別の g クラスの画像を表示しています。これらの画像をそれぞれの長方形に表示する必要があります。

d3.select("body").selectAll("rect")
.data(piedata)
.enter()
.append("svg:image")
.attr("xlink:href",function(d) {return d.data.image;})
.attr("width",50)
.attr("height",50)

js リンク: http://jsfiddle.net/sai20/5dzpc3wn/

4

1 に答える 1

3

1つのセクションに1つのデータセットを使用して長方形を作成し、次に他のデータセットを使用してgグループを作成しているため、単一のデータセットを使用することをお勧めします...そのグループに画像を配置しています。

データセット内のデータごとに 1 つの g を使用することをお勧めします。そして、そのgに画像と長方形を追加します...人生は簡単です。このようなもの

var mygroups = svg.selectAll("g")
    .data(piedata)
    .enter().append("g");
mygroups
    .append("rect")
    .attr("width", x.rangeBand())
    .attr("y", function (d) {
    return y(d.y1);
})
    .attr("height", function (d) {
    return y(d.y0) - y(d.y1);
})
    .attr("class", "rectangle")
    .style("fill", function (d) {
    return color(d.label);
});
mygroups
    .append("svg:image")
    .attr("xlink:href",function(d) {return d.image})
    .attr("height", function (d) {
    return y(d.y0) - y(d.y1);
}).attr("width", x.rangeBand())
    .attr("y", function (d) {
    return y(d.y1);
});

ここでの作業コード: http://jsfiddle.net/cyril123/0xo38x8q/7/

于 2015-06-23T10:17:04.567 に答える