删除 d3.js 区域图中沿轴的轮廓

Question

我创建了一个带有白色填充和红色轮廓的面积图：

它工作正常，但我想去掉 X 和 Y 轴上的红色轮廓，只留下代表实际数据的轮廓。因此，在上面的屏幕截图中，我想删除沿轴垂直和水平跟踪的红线。

我当前的代码：

x.domain(d3.extent(data, function(d) { return d.date; }));
if(full){
    y.domain([0, 1.1*d3.max(data, function(d) { return d.value; })]);
    area.y0(y(0));
} else {
    y.domain([0.98*d3.min(data, function(d) { return d.value; }), 1.02*d3.max(data, function(d) { return d.value; })]);
    area.y0(y(0.98*d3.min(data, function(d) { return d.value; })));
}

g.append("path")
        .datum(data)
        .attr("fill", "#fff")
        .attr("stroke", "#fa0d18")
        .attr("d", area);

g.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%m/%d")))
    .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", "rotate(-65)");

g.append("g")
    .call(d3.axisLeft(y))
    .append("text")
    .attr("fill", "#000")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("text-anchor", "end")
    .text("Price ($)");

这可能吗？如何实现？

附：请忽略屏幕中间的灰色竖线，这里不相关。

Answer 1

目前红线是这里stroke属性的结果（你可以去掉这个属性，看到红线消失了）：

g.append("path")
        .datum(data)
        .attr("fill", "#fff")
        .attr("stroke", "#fa0d18") // <== !!!
        .attr("d", area);

我以this blocks 为基础模仿您的问题。见下面隐藏的sn-p：

var dataAsCSV = `date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00
24-Apr-12,130.28
23-Apr-12,166.70
20-Apr-12,234.98
19-Apr-12,345.44
18-Apr-12,443.34
17-Apr-12,543.70
16-Apr-12,580.13
13-Apr-12,605.23
12-Apr-12,622.77
11-Apr-12,626.20
10-Apr-12,628.44
9-Apr-12,636.23
5-Apr-12,633.68
4-Apr-12,624.31
3-Apr-12,629.32
2-Apr-12,618.63
30-Mar-12,599.55
29-Mar-12,609.86
28-Mar-12,617.62
27-Mar-12,614.48
26-Mar-12,606.98`;

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// parse the date / time
var parseTime = d3.timeParse("%d-%b-%y");

// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the area
var area = d3.area()
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.close); });

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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 + ")");

const data = d3.csvParse(dataAsCSV);

// format the data
data.forEach(function(d) {
    d.date = parseTime(d.date);
    d.close = +d.close;
});

// scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);

// add the area
  svg.append("path")
     .data([data])
     .attr("class", "area")
     .attr("stroke", "#fa0d18")
     .attr("d", area);

// add the X Axis
svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

// add the Y Axis
svg.append("g")
    .call(d3.axisLeft(y));

.area {
  fill: lightsteelblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>

要绘制代表实际数据的红线，您必须执行三个步骤（您有另一个数据集，因此您应该使用适当的属性名称 - value、date 从您的代码中可以看到）：

1) 移除stroke 属性。

2) 以这种方式指定画线功能：

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

3) 并画线：

  svg.append("path")
      .data([data])
      .attr('fill', 'none')
      .attr('stroke', '#fa0d18')
      .attr("class", "line")
      .attr("d", valueline);

查看下面隐藏演示的结果：

var dataAsCSV = `date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00
24-Apr-12,130.28
23-Apr-12,166.70
20-Apr-12,234.98
19-Apr-12,345.44
18-Apr-12,443.34
17-Apr-12,543.70
16-Apr-12,580.13
13-Apr-12,605.23
12-Apr-12,622.77
11-Apr-12,626.20
10-Apr-12,628.44
9-Apr-12,636.23
5-Apr-12,633.68
4-Apr-12,624.31
3-Apr-12,629.32
2-Apr-12,618.63
30-Mar-12,599.55
29-Mar-12,609.86
28-Mar-12,617.62
27-Mar-12,614.48
26-Mar-12,606.98`;

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// parse the date / time
var parseTime = d3.timeParse("%d-%b-%y");

// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the area
var area = d3.area()
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.close); });
    
// define the line
var valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });
    
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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 + ")");

const data = d3.csvParse(dataAsCSV);

// format the data
data.forEach(function(d) {
    d.date = parseTime(d.date);
    d.close = +d.close;
});

// scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);

// add the area
  svg.append("path")
     .data([data])
     .attr("class", "area")
     .attr("d", area);

  // add the valueline path.
  svg.append("path")
      .data([data])
      .attr('stroke', '#fa0d18')
      .attr('fill', 'none')
      .attr("class", "line")
      .attr("d", valueline);
      
// add the X Axis
svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

// add the Y Axis
svg.append("g")
    .call(d3.axisLeft(y));

.area {
  fill: lightsteelblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>

Answer 2

您可以使用定义来限制显示的点

每个样本都通过函数，如果返回 false，则不显示点...

var line = d3.line()
    .defined(function(d) { 
       return d.x < xMax && dx > xMin && d.y > yMin && d.y< yMax; 
    })
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

或者，您可以使用本示例中的剪辑路径。

https://bl.ocks.org/mbostock/4015254