将现有D3可视化工作作出反应

我有我试图修改工作已有D3热图反应。

我试图采取的办法载于本VID ...

https://www.youtube.com/watch?v=65UojvN1Qqs

...基本上说，使用D3为它的数学智慧，并为DOM操作反应。

但是我坚持试图转换从现有的热图采取了以下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）调用;这会给它一些上下文来处理，这是我认为我错过了。

任何反馈意见。

来源

2017-06-21 Luke

你甚至可以在反应组件中使用它？为什么不使用其他一些已经运行良好的库？ – Ozan

@Ozan - https://www.youtube.com/watch?v=65UojvN1Qqs。为什么 - 我没有找到完全符合我们需要的热图。 – Luke

@Ozan - https://stackoverflow.com/a/35169365/7925744 – Luke

在这里回答我自己的问题。希望其他人可能会发现它很方便：

const xScale = scaleTime() 
     .domain(domain) 
     .range(range); 

     const xTicks = timeScale.ticks() 

     const xTickElements = timeTicks.map((tick, index) => { 
      const position = xScale(tick) 
      const translate =`translate(0, ${position})` 
      return (
       <g key={`${tick}.${index}`} className="tick" transform={translate}> 
       <text>{tick}</text> 
       </g> 
     ) 
     }) 


return (<svg width={width} height={height}><g>{xTickElements}</g></svg>)

任何反馈正面或负面赞赏。

来源

2017-06-26 14:21:09 Luke

将现有D3可视化工作作出反应

回答

相关问题