Question

我从多系列折线图中获取代码并对其进行修改以使用我的数据。

现在我只代表一行。然而，正在填写一行，我无法弄清楚我正在使用哪种设置导致填充。

代码的脚本部分：

var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

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

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

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

var line = d3.svg.line()
.interpolate("cardinal")
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });

var svg = d3.select("body").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 + ")");

var data = getData();
var nest = d3.nest().key(function(d){
    return d.point_description;
}).entries(data);


console.log("nest " + nest );
console.log("nest key " + nest[0].key );
console.log("nest values " + nest[0].values );

nest.forEach(function(d) {
console.log("d value " + d.key);

d.values.forEach(function(d) {
    console.log(" d " + d.x);
    console.log(" parsed " + parseDate(d.x));
    d.x = parseDate(d.x);   
});

});



x.domain(d3.extent(data, function(d) { return d.x; }));

y.domain([
d3.min(nest, function(c) { return d3.min(c.values, function(v) { return v.y; }); }),
d3.max(nest, function(c) { return d3.max(c.values, function(v) { return v.y; }); })
]);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("MMcf");

var city = svg.selectAll(".city")
  .data(nest)
.enter().append("g")
  .attr("class", "city");

city.append("path")
  .attr("class", "line")
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", function(d) { 
        console.log("point des " + d.key);
        console.log("color " + color(d.point_description));
      return color(d.point_description); });

city.append("text")
  .datum(function(d) { return {name: d.key, value: d.values[d.values.length - 1]}; })
  .attr("transform", function(d) { return "translate(" + x(d.value.x) + "," + y(d.value.y) + ")"; })
  .attr("x", 3)
  .attr("dy", ".35em")
  .text(function(d) { 
        console.log("returning text " + d.name);
      return d.name; });

提前谢谢。

Answer 1

我的错，我弄清楚了。缺少一块css。

这段代码创建了行属性：

    city.append("path")
   .attr("class", "line")

这条CSS负责无填充：

    .axis line {
     fill: none;
     stroke: #000;
     shape-rendering: crispEdges;
     }

D3时间序列线看起来像区域而不是线

1 个答案: