Question

我想根据数据集的值为矩形着色。

下面是一个示例，其中我绘制正弦波并用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)')

Answer 1

我现在明白了。我将定义一个复杂的渐变，匹配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()
	.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) + '%';
  });

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')
	    .selectAll('rect')
	    .data(data)
	    .enter()
	    .append('rect')
	    .attr('x', function(d) {return xScale(d.x);})
	    .attr('y', 200)
	    .attr('width', rWidth)
	    .attr('height', 20)
	    .attr('stroke', 'none')
	    .attr('fill', function(d) {return c(d.y);})

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

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

d3：根据另一个数据集为一条线着色

1 个答案: