d3：根据另一个数据集颜色线

这里是一个例子，我绘制正弦波并用y值对线进行着色（当y值从1变为-1时，从红色变为蓝色）。

我想要的是有一个由y值着色的酒吧。

这里是一个小提琴：https://jsfiddle.net/sanandak/m2jryr22/11/

（道歉我以前的帖子里小提琴不翼而飞！）

var svg = d3.select('body').append('svg') 
svg.attr('width', 300).attr('height', 300) 

data = d3.range(0, 2 * Math.PI, 0.1) 
    .map(function(t) { 
    return { 
     x: t, 
     y: Math.sin(t) 
    }; 
    }); 

var xScale = d3.scaleLinear() 
    .domain([0, 2 * Math.PI]) 
    .range([10, 290]) 

var yScale = d3.scaleLinear() 
    .domain([-1, 1]) 
    .range([150, 10]) 

var line = d3.line() 
    .x(function(d, i) { 
    return xScale(d.x); 
    }) 
    .y(function(d, i) { 
    return yScale(d.y); 
    }); 

svg.append("linearGradient") 
    .attr("id", "line-gradient") 
    .attr("gradientUnits", "userSpaceOnUse") 
    .attr("x1", 0).attr("y1", yScale(-1)) 
    .attr("x2", 0).attr("y2", yScale(1)) 
    .selectAll("stop") 
    .data([{ 
    "offset": "0%", 
    color: "blue" 
    }, { 
    "offset": "100%", 
    color: "red" 
    }]) 
    .enter() 
    .append("stop") 
    .attr("offset", function(d) { 
    return d.offset; 
    }) 
    .attr("stop-color", function(d) { 
    return d.color; 
    }) 

svg.append('g') 
    .datum(data) 
    .append('path') 
    .attr('d', line) 
    .attr('class', 'line') 
    .attr('stroke', 'url(#line-gradient)') 

svg.append('g') 
    .datum(data) 
    .append('rect') 
    .attr('x', 10) 
    .attr('y', 160) 
    .attr('width', 280) 
    .attr('height', 20) 
    .attr('fill', 'url(#line-gradient)')

来源

2017-03-10 SAK

我不知道你是什么之后。您的渐变覆盖范围为140像素。您的酒吧覆盖范围为20.您不会看到酒吧中的任何渐变。 – Mark

我更新了小提琴，以显示我正在尝试做什么。我用了一系列'rect'，每种颜色都有不同的颜色。我认为应该有一个更简单的方法...？ https://jsfiddle.net/sanandak/m2jryr22/ – SAK

我现在明白了。我将定义一个复杂的渐变通过X域匹配您的y值：

var c = d3.scaleLinear() 
    .domain([-1,1]) 
    .range(['blue', 'red']) 

svg.append("linearGradient") 
    .attr("id", "line-gradient2") 
    .attr("gradientUnits", "userSpaceOnUse") 
    .attr("x1", 10).attr("y1", 0) 
    .attr("x2", 280).attr("y2", 0) 
    .selectAll("stop") 
    .data(data) 
    .enter() 
    .append('stop') 
    .attr('stop-color', function(d){ 
    return c(d.y); 
    }) 
    .attr('offset',function(d){ 
    return (d.x/xScale.domain()[1] * 100) + '%'; 
    });

这是它在行动：

var svg = d3.select('body').append('svg') 
 
svg.attr('width', 300).attr('height', 300) 
 

 
data = d3.range(0, 2 * Math.PI, 0.1) 
 
    .map(function(t) { 
 
    return { 
 
     x: t, 
 
     y: Math.sin(t) 
 
    }; 
 
    }); 
 

 
var xScale = d3.scaleLinear() 
 
    .domain([0, 2 * Math.PI]) 
 
    .range([10, 290]) 
 

 
var yScale = d3.scaleLinear() 
 
    .domain([-1, 1]) 
 
    .range([150, 10]) 
 
    
 
var line = d3.line() 
 
    .x(function(d, i) { 
 
    return xScale(d.x); 
 
    }) 
 
    .y(function(d, i) { 
 
    return yScale(d.y); 
 
    }); 
 

 
svg.append("linearGradient") 
 
    .attr("id", "line-gradient") 
 
    .attr("gradientUnits", "userSpaceOnUse") 
 
    .attr("x1", 0).attr("y1", yScale(-1)) 
 
    .attr("x2", 0).attr("y2", yScale(1)) 
 
    .selectAll("stop") 
 
    .data([{ 
 
    "offset": "0%", 
 
    color: "blue" 
 
    }, { 
 
    "offset": "100%", 
 
    color: "red" 
 
    }]) 
 
    .enter() 
 
    .append("stop") 
 
    .attr("offset", function(d) { 
 
    return d.offset; 
 
    }) 
 
    .attr("stop-color", function(d) { 
 
    return d.color; 
 
    }) 
 
    
 
var c = d3.scaleLinear() 
 
\t .domain([-1,1]) 
 
\t .range(['blue', 'red']) 
 
    
 
svg.append("linearGradient") 
 
    .attr("id", "line-gradient2") 
 
    .attr("gradientUnits", "userSpaceOnUse") 
 
    .attr("x1", 10).attr("y1", 0) 
 
    .attr("x2", 280).attr("y2", 0) 
 
    .selectAll("stop") 
 
    .data(data) 
 
    .enter() 
 
    .append('stop') 
 
    .attr('stop-color', function(d){ 
 
    \t return c(d.y); 
 
    }) 
 
    .attr('offset',function(d){ 
 
    \t return (d.x/xScale.domain()[1] * 100) + '%'; 
 
    }); 
 

 
svg.append('g') 
 
    .datum(data) 
 
    .append('path') 
 
    .attr('d', line) 
 
    .attr('class', 'line') 
 
    .attr('stroke', 'url(#line-gradient)') 
 

 
svg.append('g') 
 
    .datum(data) 
 
    .append('rect') 
 
    .attr('x', 10) 
 
    .attr('y', 160) 
 
    .attr('width', 280) 
 
    .attr('height', 20) 
 
    .attr('fill', 'url(#line-gradient2)') 
 
    
 
var rWidth = 280/(data.length -1); 
 
svg.append('g') 
 
\t  .selectAll('rect') 
 
\t  .data(data) 
 
\t  .enter() 
 
\t  .append('rect') 
 
\t  .attr('x', function(d) {return xScale(d.x);}) 
 
\t  .attr('y', 200) 
 
\t  .attr('width', rWidth) 
 
\t  .attr('height', 20) 
 
\t  .attr('stroke', 'none') 
 
\t  .attr('fill', function(d) {return c(d.y);})

.line { 
 
    fill: none; 
 
    stroke-width: 2; 
 
}

<script src="//d3js.org/d3.v4.min.js"></script>

来源

2017-03-11 18:05:12 Mark

d3：根据另一个数据集颜色线

回答

相关问题