时间戳

首页 > 解决方案 > D3 线性梯度基线不在平均线上。我如何将线性渐变线放在我想要的确切位置？

d3.js - D3 线性梯度基线不在平均线上。我如何将线性渐变线放在我想要的确切位置？

问题描述

我发布的上一个问题的示例代码非常混乱。所以我把它瘦下来了。

我尝试为区域图中的两个区域着色

  1. 高于平均线和
  2. 低于平均线。

即使我计算了整个区域平均值的百分比值，它仍然显示出看起来与平均值略有偏离的梯度。

我关注的代码如下。

let v1=d3.max(valuesonly)
    let v2=d3.min(valuesonly)
    let offsetpercentage=(averagevalue/(v1-v2))*100
    
    let quad1=offsetpercentage*1/4
    let quad2=offsetpercentage*2/4
    let quad3=offsetpercentage*3/4
    let quad4=(100-offsetpercentage)*1/4
    let quad5=(100-offsetpercentage)*2/4
    let quad6=(100-offsetpercentage)*3/4

    defs = svg.append("defs");
  


var gradient = defs.append("linearGradient")
                   .attr("id", "area-gradient")
                   .attr("gradientUnits", "userSpaceOnUse")
                   .attr("x1", xscale(focusitem[0].date)).attr("y1", yscale(d3.min(valuesonly))-margin.bottom)              
                   .attr("x2", xscale(focusitem[0].date)).attr("y2", yscale(d3.max(valuesonly))-margin.top) 
                   .selectAll("stop")



    gradient.data([ 
                    {offset: '0%' , color: "rgba(245,75,94,0.5)"},  
                    {offset: `${quad1}%` , color: "rgba(245,75,94,0.4)"},
                    {offset: `${quad2}%` , color: "rgba(245,75,94,0.3)"},
                    {offset: `${offsetpercentage}%`, color:"rgba(245,75,94,0.0)"},  
                    {offset: `${quad5}%` , color: "rgba(22,119,252,0.5)"},
                    {offset: `${quad6}%` , color: "rgba(22,119,252,0.7)"},
                    {offset: "100%", color: "rgba(22,119,252,1)"}
                     ])             
                    .enter()
                    .append("stop")                         
                    .attr("offset", function(d) { return d.offset; })       
                    .attr("stop-color", function(d) { return d.color; })

整个代码在以下链接中。

https://codepen.io/jotnajoa/pen/KKzmmLN?editors=1011

先感谢您。

标签： d3.jsdata-visualization

解决方案

我找到了这个原因！我想分享一下原因。

.attr("x1", xscale(focusitem[0].date))
.attr("y1", yscale(d3.min(valuesonly))-margin.bottom)    
          
.attr("x2", xscale(focusitem[0].date))
.attr("y2", yscale(d3.max(valuesonly))-margin.top)

上面的部分是问题。在这种情况下，规模不应该有余量。

推荐阅读