Question

我想使用D3.js创建折线图。 Here折线图示例。

这是我的代码：

var margin = {top: 0, right: 0, bottom: 0, left: 0};
var svg = d3.select('#linechart')
    .append('svg')
    .attr('width', 600)
    .attr('height', 200);
var values = createAxisLine(svg);
var x = values[0];
var y = values[1];
var width = values[2];
var height = values[3];
createChartLine(svg, x, y, width, height);

function createAxisLine(thisSvg) {
    var width = thisSvg.attr('width') - margin.left - margin.right;
    var height = thisSvg.attr('height') - margin.top - margin.bottom;
    thisSvg = thisSvg.append('g').attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
    var x = d3.scaleBand()
        .rangeRound([0, width])
        .domain([2016, 2015, 2014, 2013, 2012, 2011, 2010]);
    var y = d3.scaleLinear()
        .range([height, 0])
        .domain([0, 100]);
    var xAxis = d3.axisBottom(x).tickSize(0, 0);
    var yAxis = d3.axisLeft(y);
    thisSvg.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)');
    thisSvg.append('g')
        .attr('class', 'y axis')
        .attr('transform', 'translate(' + margin.left + ', 0)')
        .call(yAxis)
        .append('text')
        .attr('transform', 'rotate(-90)')
        .attr('y', 6)
        .attr('dy', '.71em')
        .style('text-anchor', 'end');
    return [x, y, width, height];
}

function createChartLine(thisSvg, x, y, width, height) {
    thisSvg.selectAll(null)
        .data(mydata)
        .attr('transform', function(d) {
            return 'translate(' + margin.left + ', ' + margin.top + ')';
        });
    var line = d3.line()
        .x(function(d) {
            return x(d.year);
        }) 
        .y(function(d) {
            if(isNaN(d.value)) return 0;
            else return y(d.value);
        });
    lines.append('path')
        .attr('fill', 'none')
        .attr('stroke', 'steelblue')
        .attr('stroke-width', 1.5)
        .attr('d', line);
}

所有代码都在this plunker。

当我运行代码时，没有任何内容出现，没有显示任何行或轴。但数据是正确的，所以我不明白问题是什么。

我收到此错误：

我需要帮助

Answer 1

为什么没有出现的问题是你的script.js中的代码在加载线图元素之前运行。其中一个建议是在你的身体标签关闭之前包含你的script.js。

<body>
    <div id='linechart'></div>
    <script src="script.js"></script>
</body>

无法在D3.js中创建折线图

1 个答案: