bl.ocks.org/mbostock/1667367 のブラッシング チャートを介して、Mike Bostock の Focus+Context を調整して、ブラシの四角形の両方の垂直線にドラッグ アイコンを含めようとしています。これらは、選択が行われると表示され、選択/ブラシをかけられた領域を縮小または拡大するための視覚的な合図として機能します。画像の配置が動的であることがわかります。つまり、ブラシ領域がリセットされた後の更新とは対照的に、ブラシ領域で流動的に移動します。私にとって最も合理的と思われるのは、次のようにコンテキスト長方形に svg 画像を追加することです。
//original code
context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height2 + 7)
//additional code
.append("svg:image")
.attr("xlink:href", "icon.png")
.attr("width", 10)
.attr("height", 10)
.style("opacity",1)
両方の画像の x と y の位置をいじってみましたが、うまく表示されませんでしたが、概念的には次のように機能していると思います
- y 軸: コンテキスト チャートの高さを 2 で割った値
- x 軸: ブラッシングされた領域の最小および最大 x 値にそれぞれ対応する各画像
どんな助けでも大歓迎です。