Fatal编程技术网
  • javascript/
  • Javascript 如何使用d3js nest（）数据修改多个图表中的颜色笔划

Javascript 如何使用d3js nest（）数据修改多个图表中的颜色笔划

javascript d3.js

Javascript 如何使用d3js nest（）数据修改多个图表中的颜色笔划,javascript,d3.js,Javascript,D3.js,我试图通过轴值添加线条颜色条件 attr（“笔划”、“红色”）如果日期为“2008年1月”我试图用下面的代码修改var行，但没有成功。如有任何建议，将不胜感激 > var line = d3.svg.line() > .x(function(d) { return x(d.date); }) > .y(function(d) { return y(d.price); }) > .attr( "stroke", function(d) { if (d

我试图通过轴值添加线条颜色条件

attr（“笔划”、“红色”）如果日期为“2008年1月”我试图用下面的代码修改var行，但没有成功。如有任何建议，将不胜感激

> var line = d3.svg.line()
>     .x(function(d) { return x(d.date); })
>     .y(function(d) { return y(d.price); })
>     .attr( "stroke", function(d) { if (d.date > 'Jan 2008' { return "red"};  })
来自下面的d3代码或来自此链接的完整代码和数据集：


身体{
字体：10px无衬线；
保证金：0；
}
.线路{
填充：无；
行程：#666；
笔划宽度：1.5px；
}
.区域{
填充：#e7e7e7；
}
var margin={顶部：8，右侧：10，底部：2，左侧：10}，
宽度=960-margin.left-margin.right，
高度=69-margin.top-margin.bottom；
var parseDate=d3.time.format（“%b%Y”）.parse；
var x=d3.time.scale（）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var area=d3.svg.area（）
.x（函数（d）{返回x（d.date）；}）
.y0（高度）
.y1（函数（d）{返回y（d.price）；}）；
var line=d3.svg.line（）
.x（函数（d）{返回x（d.date）；}）
.y（函数（d）{返回y（d.price）；}）；
d3.csv（“stocks.csv”），类型，功能（错误，数据）{
//按符号嵌套数据。
var symbols=d3.nest（）
.key（函数（d）{返回d.symbol；}）
.条目（数据）；
//计算y域所需的每个符号的最大价格。
符号。forEach（函数）{
s、 maxPrice=d3.max（s.values，函数（d）{返回d.price；}）；
});
//计算符号之间的最小和最大日期。
//我们假设值是按日期排序的。
x、 领域([
d3.min（符号，函数{返回s.values[0].date；}），
max（符号，函数{返回s.values[s.values.length-1].date；}）
]);
//为每个符号添加一个SVG元素，具有所需的尺寸和边距。
var svg=d3.选择（“主体”）.选择全部（“svg”）
.数据（符号）
.enter（）.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//添加区域路径元素。注意：y域是按元素设置的。
追加（“路径”）
.attr（“类别”、“区域”）
.attr（“d”，函数（d）{y.domain（[0，d.maxPrice]）；返回区域（d.values）；}；
//添加行路径元素。注意：y域是按元素设置的。
追加（“路径”）
.attr（“类”、“行”）
.attr（“d”，函数（d）{y.domain（[0，d.maxPrice]）；返回行（d.values）；}；
//为符号名称添加一个小标签。
svg.append（“文本”）
.attr（“x”，宽度-6）
.attr（“y”，高度-6）
.style（“文本锚定”、“结束”）
.text（函数（d）{return d.key；}）；
});
功能类型（d）{
d、 价格=+d.价格；
d、 日期=解析日期（d.date）；
返回d；
}
您需要构造一个
Date
对象并与之进行比较，例如
if（d.Date>parseDate（“Jan 2008”）{…}
@larskothoff我试图使用parseDate更改代码，但仍然无法工作，因为数据位于嵌套循环中。我不知道如何在路径元素的函数（d）中指出轴（值）。哦，我现在明白你的意思了。我会用一只手来做这个。你可以找到一个例子。线性梯度确实是实现这一点的方法。使梯度非常小——比如说在59.9%到60%之间，以实现一个干净的断裂。 
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
  margin: 0;
}

.line {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

.area {
  fill: #e7e7e7;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 8, right: 10, bottom: 2, left: 10},
    width = 960 - margin.left - margin.right,
    height = 69 - margin.top - margin.bottom;

var parseDate = d3.time.format("%b %Y").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var area = d3.svg.area()
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.price); });

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });

d3.csv("stocks.csv", type, function(error, data) {

  // Nest data by symbol.
  var symbols = d3.nest()
      .key(function(d) { return d.symbol; })
      .entries(data);

  // Compute the maximum price per symbol, needed for the y-domain.
  symbols.forEach(function(s) {
    s.maxPrice = d3.max(s.values, function(d) { return d.price; });
  });

  // Compute the minimum and maximum date across symbols.
  // We assume values are sorted by date.
  x.domain([
    d3.min(symbols, function(s) { return s.values[0].date; }),
    d3.max(symbols, function(s) { return s.values[s.values.length - 1].date; })
  ]);

  // Add an SVG element for each symbol, with the desired dimensions and margin.
  var svg = d3.select("body").selectAll("svg")
      .data(symbols)
    .enter().append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // Add the area path elements. Note: the y-domain is set per element.
  svg.append("path")
      .attr("class", "area")
      .attr("d", function(d) { y.domain([0, d.maxPrice]); return area(d.values); });

  // Add the line path elements. Note: the y-domain is set per element.
  svg.append("path")
      .attr("class", "line")
      .attr("d", function(d) { y.domain([0, d.maxPrice]); return line(d.values); });

  // Add a small label for the symbol name.
  svg.append("text")
      .attr("x", width - 6)
      .attr("y", height - 6)
      .style("text-anchor", "end")
      .text(function(d) { return d.key; });
});

function type(d) {
  d.price = +d.price;
  d.date = parseDate(d.date);
  return d;
}

</script>