に反応して動作するように既存のD3の可視化の変換:)は、私がd3の両方にかなり新しいですので優しくしてくださいリアクト
私は私がで反応動作するように変更しようとしています既存のD3のヒートマップを持っています。基本的には数学の知性だためにD3を使用し、DOM操作に反応するように言う
私は、このVIDに定めたアプローチに従うことをしようとしている...
https://www.youtube.com/watch?v=65UojvN1Qqs
...。私は既存のヒートマップから取った次のx軸のコードを変換しようとしてこだわっているしかし
...ドメインと範囲に与えられた値に応じて、
// X-SCALE
var xScale = d3
.scaleTime()
.domain(domain)
.nice()
.range(range);
var xAxis = d3
.axisBottom(xScale)
.tickSize(0);
function customXAxis(g) {
let textAdjustment = blockWidth/2;
g.call(xAxis);
g.select(".domain").remove();
g.selectAll(".tick line").attr("stroke", "#D8D9DA");
g.selectAll(".tick text").attr("fill", "#D8D9DA").attr("dx", textAdjustment);
}
g.append("g")
.attr("transform", "translate(0," + plotAreaheight + ")")
.call(customXAxis);
、はずの線に沿って何かを出力...
<g transform="translate(0,198)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"> <g class="tick" opacity="1" transform="translate(40,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Tue 23</text> </g> <g class="tick" opacity="1" transform="translate(158.23387096774195,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Thu 25</text> </g> <g class="tick" opacity="1" transform="translate(276.4677419354839,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Sat 27</text> </g> <g class="tick" opacity="1" transform="translate(394.7016129032258,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Mon 29</text> </g> <g class="tick" opacity="1" transform="translate(512.9354838709678,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Wed 31</text> </g> <g class="tick" opacity="1" transform="translate(572.0524193548388,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">June</text> </g> <g class="tick" opacity="1" transform="translate(690.2862903225807,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Sat 03</text> </g> <g class="tick" opacity="1" transform="translate(808.5201612903226,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Mon 05</text> </g> <g class="tick" opacity="1" transform="translate(926.7540322580645,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Wed 07</text> </g> <g class="tick" opacity="1" transform="translate(1044.9879032258063,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Fri 09</text> </g> <g class="tick" opacity="1" transform="translate(1163.2217741935483,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Jun 11</text> </g> <g class="tick" opacity="1" transform="translate(1281.4556451612902,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Tue 13</text> </g> <g class="tick" opacity="1" transform="translate(1399.6895161290322,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Thu 15</text> </g> <g class="tick" opacity="1" transform="translate(1517.9233870967741,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Sat 17</text> </g> <g class="tick" opacity="1" transform="translate(1636.157258064516,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Mon 19</text> </g> <g class="tick" opacity="1" transform="translate(1754.391129032258,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Wed 21</text> </g> <g class="tick" opacity="1" transform="translate(1872.625,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Fri 23</text> </g> </g>
私の頭には、xAxisの結果をマップできるようにしたいと感じています。何かのように...
xAxis().map((d, i) => {
<g class="tick" opacity="1" transform="translate(1872.625,0)">
<line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
<text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Fri 23</text>
</g>
})
...しかし、それを動作させることはできません。オリジナルでは、xAxisはg.call(xAxis)で呼び出されています。私はそれが私が行方不明だと思うもので、これを働かせるために何らかの文脈を与えるでしょう。
フィードバックが高く評価されました。
反応成分の中でこれをどのように使用しますか?なぜうまくいっている他のライブラリを使ってみませんか? – Ozan
@Ozan - How https://www.youtube.com/watch?v=65UojvN1Qqs。なぜ - 私は私たちが必要とする正確なヒートマップを見つけられませんでした。 – Luke
@Ozan - https://stackoverflow.com/a/35169365/7925744 – Luke