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

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

d3.js

无法在D3.js中创建折线图,d3.js,linechart,D3.js,Linechart,我想使用D3.js创建一个折线图。折线图的一个例子这是我的代码： 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

我想使用D3.js创建一个折线图。折线图的一个例子

这是我的代码：

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);
}

所有的代码都在里面

当我运行代码时，不会显示任何内容，也不会显示任何线条或轴。但是数据是正确获取的，所以我不明白问题是什么

我得到这个错误：

我需要帮助

为什么什么都不显示的问题是，script.js中的代码在加载linechart元素之前运行。其中一个建议是在关闭body标记之前包含script.js

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

谢谢你的建议，但我认为这不是问题所在。我用这种方法创建了另一个图表，它总是worked@Step这就是问题所在。一旦这被排除，代码中会有更多的问题，但这就是问题中描述的第一个错误的原因。相关：。@altocumulus对不起，你说得对。现在我遇到了其他问题，但没有节点为空错误。您是否检查了浏览器的开发工具？控制台中是否显示任何错误消息？@LukeWoodward是的，实际上没有错误？我在控制台查看你的plunker时出错。你说的对吗？卢克沃德，你说得对。但node为null意味着什么呢？我根据到目前为止提供的一个答案上的注释编辑我的主要消息，这意味着您没有选择任何内容，因为您尝试选择的元素在您的JS代码运行时不存在。