Imber et d3v4 importer des erreurs

Question

J'essaie d'utiliser d3v4 dans un projet Emberjs. J'essaie de créer un graphique d3js à l'intérieur des composants Ember. https://www.npmjs.com/package/ember-d3

Dans reactjs - j'importer comme ça

import * as d3 from "d3"; 

mais lorsque je tente de le faire - j'obtenir des erreurs d'importation.

Could not find module `ember-d3` imported 

même pour seulement d3

Could not find module `d3` imported 

J'ai deux dépendances en place pour d3?

"d3": "^4.2.7", 
    "ember-d3": "^0.3.4", 

Answer 1

Après avoir installé browserify

npm install --save-dev browserify d3 

J'ai réussi à accéder à d3.js en utilisant cette méthode

import d3 from "npm:d3"; 

J'emballage le tableau dans un div comme celui-ci

this.$('.wrapper') 

pour le styl es pour les cartes

import those in your app/styles/app.scss with @import 'custom-styles.scss'; 

---

donc un tableau de ligne Ember pour moi ressemble à ceci.

/app/components/line-chart.js

import Ember from 'ember'; 
import Component from 'ember-component'; 
import layout from '../templates/components/line-chart'; 

//import * as d3 from "d3"; 

import { select } from 'd3-selection'; 

//import d3 from 'd3'; 
import d3 from "npm:d3"; 

const { run, get } = Ember; 

export default Component.extend({ 

    tagName: 'div', 

    didReceiveAttrs: function() { 
     // Schedule a call to our `drawCircles` method on Ember's "render" queue, which will 
     // happen after the component has been placed in the DOM, and subsequently 
     // each time data is changed. 
     run.scheduleOnce('render', this, this.drawLineChart); 
    }, 

    drawLineChart(){ 

     var $this = this.$('.lineChart'); 

     var w = $this.data("width"); 
     var h = $this.data("height"); 

     var data = [ 
      {"date": "1-May-12", "close": 45.34}, 
      {"date": "30-Apr-12", "close": 53.98}, 
      {"date": "27-Apr-12", "close": 67.00}, 
      {"date": "23-Apr-12", "close": 166.70} 
     ]; 

     // set the dimensions and margins of the graph 
     var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
      width = w - margin.left - margin.right, 
      height = h - margin.top - margin.bottom; 

     // 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 line 
     var valueline = d3.line() 
      .x(function(d) { return x(d.date); }) 
      .y(function(d) { return y(d.close); }); 

     // append the svg obgect to the body of the page 
     // appends a 'group' element to 'svg' 
     // moves the 'group' element to the top left margin 
     var svg = d3.select($this[0]).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 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)); 

    } 

}); 

styles/ligne chart.scss

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

et à l'intérieur app.scss - j'importer cela comme si

@import "./line-chart.scss"; 

templates/components/line-chart.hbs

<div class="lineChart" 
    data-width="960" 
    data-height="500" 
> 
</div> 

et où vous voulez qu'il apparaisse.

{{line-chart}}