d3插值模式不变

Question

我正在研究一个我们发现的问题，并将其缩小到插值模式，导致我们的样条图倾向于低于零。我创建了一支笔来向同事说明问题。我遇到的问题是<select>不会更改图形的插值模式。此外，除非我将.attr('d', line)添加到path，否则图表根本不显示。我觉得这应该工作，因为我用http://bl.ocks.org/mbostock/4342190作为如何动态改变插值模式的参考。

这里的笔http://codepen.io/gtb104/pen/meqNmZ?editors=001

下面是从笔的JS。

const data = [ 
    { date: 1413733239000, close: 0 }, 
    { date: 1413743239000, close: 0 }, 
    { date: 1413753239000, close: 0 }, 
    { date: 1413763239000, close: 23 }, 
    { date: 1413773239000, close: 0 }, 
    { date: 1413783239000, close: 0 }, 
    { date: 1413793239000, close: 0 }, 
    { date: 1413803239000, close: 0 }, 
    { date: 1413813239000, close: 2 }, 
    { date: 1413823239000, close: 0 }, 
    { date: 1413833239000, close: 0 } 
    ]; 
const margin = { 
    top: 20, 
    right: 20, 
    bottom: 30, 
    left: 50 
    }; 
const width = 650 - margin.left - margin.right; 
const height = 300 - margin.top - margin.bottom; 

let x = d3.time.scale() 
    .range([0, width]) 
    .domain(d3.extent(data, d => d.date)); 

let y = d3.scale.linear() 
    .range([height, 0]) 
    .domain(d3.extent(data, d => d.close)); 

let xAxis = d3.svg.axis() 
    .scale(x) 
    .orient('bottom'); 

let yAxis = d3.svg.axis() 
    .scale(y) 
    .orient('left'); 

let line = d3.svg.line() 
    .x(d => x(d.date)) 
    .y(d => y(d.close)) 
    .interpolate('cardinal'); 

let svg = d3.select('#chart').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 + ')'); 

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

svg.append('g') 
    .attr('class', 'y axis') 
    .call(yAxis); 

svg.append('path') 
    .datum(data) 
    .attr('class', 'line') 
    .attr('d', line)//<-- I don't think this should be required here 
    .call(redraw); 

d3.select('#interpolate') 
    .on('change', change) 
    .selectAll('option') 
    .data([ 
    'cardinal', 
    'monotone' 
    ]) 
    .enter().append('option') 
    .attr('value', d => d) 
    .text(d => d); 

function redraw() { 
    svg.select('path').attr('d', line); 
}; 

function change() { 
    line.interpolate(this.value); 
    redraw(); 
}; 

Answer 1

，如果你改变你的重绘功能这行代码：

svg.select('path').attr('d', line); 

这样：

svg.select('.line').attr('d', line); 

然后，它的工作原理。我认为这与你的svg包含多个路径（x和y轴）并且该示例只有一个有关。瞄准班级挑选你想插入的行，并按预期工作。