Question

尝试创建一个自定义折线图，其中只有一条简单的线条，具有渐变背景 - 线条的每个部分的背景根据该点的y值确定（值的变化保证为温和的。）

我在使用基本配置时遇到问题。这是我的代码：

JS ：

// General definitions
var HEIGHT, MARGINS, WIDTH, formatDay, lineFunc, graph, graph_data, weekdays, x, xAxis, y, yAxis;
WIDTH = 360;
HEIGHT = 130;
MARGINS = {
  top: 20,
  right: 30,
  bottom: 20,
  left: 20
};

graph = d3.select("#graph");

// Define Axes
weekdays = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];
formatDay = function(d) {
  return weekdays[d % 6];
};

x = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([
  d3.min(graph_data, function(d) {
    return d.x;
  }), d3.max(graph_data, function(d) {
    return d.x + 1;
  })
]);

y = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([
  d3.min(graph_data, function(d) {
    return d.y;
  }), d3.max(graph_data, function(d) {
    return d.y;
  })
]);
xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(formatDay);
yAxis = d3.svg.axis().scale(y).tickSize(10).orient("left");

// Line Function
lineFunc = d3.svg.line().x(function(d) {
  return x(d.x);
}).y(function(d) {
  return y(d.y);
}).interpolate("basis");

// Define Line Gradient
graph.append("linearGradient").attr("id", "line-gradient").attr("gradientUnits", "userSpaceOnUse").attr("x1", 0).attr("y1", y(0)).attr("x2", 0).attr("y2", y(200)).selectAll("stop").data([
  {
    offset: "0%",
    color: "#F0A794"
  }, {
    offset: "20%",
    color: "#F0A794"
  }, {
    offset: "20%",
    color: "#E6A36A"
  }, {
    offset: "40%",
    color: "#E6A36A"
  }, {
    offset: "40%",
    color: "#CE9BD2"
  }, {
    offset: "62%",
    color: "#CE9BD2"
  }, {
    offset: "62%",
    color: "#AA96EE"
  }, {
    offset: "82%",
    color: "#AA96EE"
  }, {
    offset: "82%",
    color: "#689BE7"
  }, {
    offset: "90%",
    color: "#689BE7"
  }, {
    offset: "90%",
    color: "1AA1DF"
  }, {
    offset: "100%",
    color: "1AA1DF"
  }
]).enter().append("stop").attr("offset", function(d) {
  return d.offset;
}).attr("stop-color", function(d) {
  return d.color;
});

// Draw Line
graph.append("svg:path").attr("d", lineFunc(graph_data));

// Draw Axes
graph.append("svg:g").attr("class", "x axis").attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")").call(xAxis);
graph.append("svg:g").attr("class", "y axis").attr("transform", "translate(" + MARGINS.left + ",0)").call(yAxis);

式

#line-gradient {
  fill: none;
  stroke: url(#line-gradient);
  stroke-width: 7px;
  stroke-linejoin: "round";
}

示例数据

graph_data = [{
  x: 1,
  y: 22
}, {
  x: 2,
  y: 20
}, {
  x: 3,
  y: 10
}, {
  x: 4,
  y: 40
}, {
  x: 5,
  y: 5
}, {
  x: 6,
  y: 30
}, {
  x: 7,
  y: 60
}]

我得到的是这样的：

enter image description here

你们中的任何一位D3.js专家都可以告诉我我做错了什么，以及为了让我的线条成为一条线而不是一个区域，需要改变什么，具有上面描述的线条背景渐变，以及圆边？

非常感谢提前！

Answer 1

这是一个小提琴：http://jsfiddle.net/henbox/gu4y7fk8/

你应该给path一个类名，如下所示：

graph.append("svg:path")
    .attr("class","chartpath")
    .attr("d", lineFunc(graph_data));

然后你的CSS样式应该在path元素而不是lineargradient元素

.chartpath {  /*note: not #line-gradient*/
  fill: none;
  stroke: url(#line-gradient);
  stroke-width: 7px;
  stroke-linejoin: "round";
}

我还修了几件事：

在几个颜色代码上缺少#，因此已更改（color: "1AA1DF"至color: "#1AA1DF"
我将渐变的最大y值从200更改为60，以便在示例中更明显地更改线条的颜色渐变（.attr("y2", y(200))到.attr("y2", y(60))）

在D3.js中创建自定义折线图

1 个答案: