私は d3 を使用して、さまざまな画像が塗りつぶされた何千もの長方形を設定しています。'def' 部分のコードは次のとおりです。
` d3.json("data/data.json", function(error, data){
var rects = svg.selectAll("rect")
.data(data);
rects.enter()
.append("rect")
.attr("x", 0)
.attr("y", function(d,i) {
return i*barheight ;
})
.attr("class", "bar")
.attr("width", barwidth)
.attr("height", barheight)
.attr("fill", function(d){
return "rgb"+ d.rgb;
});
//カバー画像を変更
var def = defsvg.selectAll("def")
.data(data);
def.enter()
.append("pattern")
.attr("id", function(d){
return d.name
})
.attr("width", 1)
.attr("height", 1)
.append("image")
.attr("width", coverwidth)
.attr("height", coverheight)
.attr("xlink:href", function(d){
return "img/" + d.name;
});
cover.attr("x", 0)
.attr("y", 0)
.attr("width", coverwidth)
.attr("height", coverheight)
.append("rect")
.attr("width", coverwidth)
.attr("height", coverheight);
d3.selectAll("rect")
.on("click", function(d){
cover.attr("fill", function(){
return "url(#" + d.name + ")";
});
});
})
`
しかし、問題はデータが 14000+ であることです。同様に、「img」フォルダには 14000 以上のアイテムがあります。各画像はわずか 30 KB ですが、特にモバイル デバイスで起動する場合は、プロジェクトにとっては大きすぎます。それに対する解決策はありますか? ありがとうございました！
これは完全にテストされていませんが、clickイベントで画像をロードします。これdefsは<defs>、SVG のノードへの d3 選択です。事前にすべてのpatternノードをデータ バインドして作成する必要はありません。これにより、パターンが作成され、それに画像が追加され、画像が読み込まれるのを待ってから、最後に長方形が塗りつぶされます。
d3.selectAll("rect")
.on("click", function(d) {
defs.append("pattern")
.attr("id", d.name)
.attr("width", 1)
.attr("height", 1)
.append("image")
.attr("onload", function() {
cover.attr("fill", "url(#" + d.name + ")");
})
.attr("width", coverwidth)
.attr("height", coverheight)
.attr("xlink:href", "img/" + d.name);
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加