Question

我创建折线图like that。

但是，我添加了更新数据的可能性。＆＃34;较暗的线＆＃34;正确更新，区号为

这是一段代码：

var margin = {top: 10, right: 10, bottom: 35, left: 30};
var width = 500 - margin.left - margin.right;
var height = 220 - margin.top - margin.bottom;

var x = d3.scalePoint().range([width, 0]);
var y = d3.scaleLinear().range([height, 0]);

x.domain([...new Set(dataFilter.map(function(d) {
    return d.year;
}))]);
y.domain([minX, 100]);

var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);

var valueline = d3.line()
    .x(function(d) { 
        return x(d.year); 
    })
    .y(function(d) { 
        return y(d.euro); 
    })
    .defined(function(d) { 
        return (d.euro !== 0 && !isNaN(d.euro));
    });

var area = d3.area()
    .x(function(d) { 
        return x(d.year); 
    })
    .y0(function(d) { 
        return y(d.euro); 
    })
    .y1(height)
    .defined(function(d) { 
        return (d.euro !== 0 && !isNaN(d.euro));
    });

var 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("path")
    .attr("class", "linePath") 
    .attr('fill', 'none')
    .attr('stroke', 'steelblue')
    .attr('stroke-width', 1)
    .attr("d", valueline(dataFilter));

svg.append('path')
    .datum(dataFilter)
    .attr('d', area)
    .attr('fill', 'steelblue')
    .attr('stroke', 'none')
    .attr('opacity', '0.1')
    .attr('class', 'areaLines');

svg.append("g") 
    .attr("class", "x axis")
    .attr("transform", "translate(0, " + height + ")")
    .call(xAxis)
    .selectAll('text')
    .style('text-anchor', 'end')
    .attr('dx', '-.8em')
    .attr('dy', '.15em')
    .attr('transform', 'rotate(-65)');

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

function updateData() {
    dataFilter = ...; // other data

    // Scale the range of the data again minX is now different
    x.domain([...new Set(dataFilter.map(function(d) {
        return d.year;
    }))]);
    y.domain([minX, 100]);

    var svg = d3.select("#chart").transition();

    svg.select(".linePath") 
        .duration(1000)
        .attr("d", valueline(dataFilter));

    svg.select(".x.axis") 
        .duration(1000)
        .call(xAxis)
        .selectAll('text')
        .style('text-anchor', 'end')
        .attr('dx', '-.8em')
        .attr('dy', '.15em')
        .attr('transform', 'rotate(-65)');

    // update area (doesn't work): TypeError: svg.select(...).datum is not a function
    svg.select('.areaLines')
        .datum(dataFilter)
        .attr('d', area)
        .duration(1000);

    svg.select(".y.axis")
        .duration(1000)
        .call(yAxis);
}

当我运行它时，我得到： TypeError：svg.select（...）。datum不是函数。为什么呢？

我找到this question，但我无法解决问题。非常感谢!!

Answer 1

你无法转换数据，这没有任何意义。这就是datum()不是transformation method的原因。

而不是转换d属性：

svg.select('.areaLines')
    .attr('d', area(dataFilter))
    .duration(1000);

更新折线图的彩色区域

1 个答案: