Невозможно создать линейный график в D3.js - PullRequest
Новая
       6

Невозможно создать линейный график в D3.js

0 голосов
/ 19 мая 2018

Я хочу создать линейный график, используя 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);
}

Весь код в этот плункер .

Когда я запускаю код, ничего не появляется, линии или оси не отображаются.Но данные правильно получены, поэтому я не понимаю, в чем проблема.

Я получаю эту ошибку:

enter image description here

Мне нужнопомощь

1 Ответ

0 голосов
/ 19 мая 2018

Проблема того, почему ничего не появляется, состоит в том, что ваш код в script.js запускается до загрузки элемента linechart.Одной из рекомендаций будет включение вашего script.js до закрытия тега body. 

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