D3 chart integration into Vuejs

Question

I am trying to integrate this D3 area graph into Vuejs and all I get from my code is the axes with a black area. It seems that the CSS properties have no effect on my graph and everything I have tried so far didn't change anything.. Most of the D3 graphs I have tried with Vuejs have similar problems.. Any ideas?

LShapz · Accepted Answer

I would change your div from a class of line-chart to an id of line-chart, then, where you have d3.select('body'), change it to d3.select('#line-chart'). That should append the graph to the write place.

Also, make sure you've installed d3v4 and not d3v3. There are serious breaking changes.

Edited to add: here's a working example in the Stack Overflow snippet runner thing. It's not a single-file component anymore but it's essentially identical.

new Vue({
      el: '#line-chart',
      mounted () {
        this.renderChart()
        setTimeout(()=>{
              this.data = [
              { date: '1-May-12', close: 58.13 },
              { date: '30-Apr-12', close: 53.98 },
              { date: '27-Apr-12', close: 67.00 },
              { date: '26-Apr-12', close: 89.70 },
              { date: '25-Apr-12', close: 99.00 },
              { date: '24-Apr-12', close: 130.28 },
              { date: '23-Apr-12', close: 166.70 },
              { date: '20-Apr-12', close: 234.98 },
              { date: '19-Apr-12', close: 345.44 },
              { date: '18-Apr-12', close: 443.34 },
              { date: '17-Apr-12', close: 543.70 },
              { date: '16-Apr-12', close: 580.13 },
              { date: '13-Apr-12', close: 605.23 },
              { date: '12-Apr-12', close: 622.77 },
              { date: '11-Apr-12', close: 626.20 },
              { date: '10-Apr-12', close: 628.44 },
              { date: '9-Apr-12', close: 636.23 },
              { date: '5-Apr-12', close: 633.68 },
              { date: '4-Apr-12', close: 624.31 },
              { date: '3-Apr-12', close: 629.32 },
              { date: '2-Apr-12', close: 618.63 },
              { date: '30-Mar-12', close: 599.55 },
              { date: '29-Mar-12', close: 609.86 },
              { date: '28-Mar-12', close: 617.62 },
              { date: '27-Mar-12', close: 614.48 },
              { date: '26-Mar-12', close: 606.98 }
             ]}, 1000)
      },
      data() {
        return {
              data: [],
              width: 960,
              height: 500 
          }
      },
      methods: {
        renderChart() {
          if (document.getElementsByTagName('svg')){
              d3.selectAll('svg').remove()
          }
          var data = this.data;
          var margin = { top: 20, right: 20, bottom: 30, left: 50 }
          var width = this.width - margin.left - margin.right;
          var height = this.height - margin.top - margin.bottom;
          var parseTime = d3.timeParse('%d-%b-%y');

          // parse the date / time
    var parseTime = d3.timeParse("%d-%b-%y");

    
    // set the ranges
    var x = d3.scaleTime().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);

    // define the area
    var area = d3.area()
        .x(function(d) { return x(d.date); })
        .y0(height)
        .y1(function(d) { return y(d.close); });

    // define the line
    var valueline = d3.line()
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.close); });

    var svg = d3.select("#line-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 + ")");

      // format the data
      data.forEach(function(d) {
          d.date = parseTime(d.date);
          d.close = +d.close;
      });

      // scale the range of the data
        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain([0, d3.max(data, function(d) { return d.close; })]);

      // add the area
        svg.append("path")
           .data([data])
           .attr("class", "area")
           .attr("d", area);

      // add the valueline path.
      svg.append("path")
          .data([data])
          .attr("class", "line")
          .attr("d", valueline);

      // add the X Axis
      svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x));

      // add the Y Axis
      svg.append("g")
          .call(d3.axisLeft(y));
      },
     },
     watch: {
     data(val) {
      if (val){
        this.renderChart()
      }
     }
    }
})

.line {
      fill: none;
      stroke: steelblue;
      stroke-width: 2px;
    }

    .area {
      fill: lightsteelblue;
    }

D3 chart integration into Vuejs

Answers (1)

Related Questions