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

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
}]

我得到的看起来像这样:

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

非常感谢!

Answer 1

这是一个 fiddle :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";
}

我还修复了其他一些问题:

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