Question

我正在尝试在Emberjs项目中使用d3v4。我正在尝试在Ember组件中创建一个d3js图表。 https://www.npmjs.com/package/ember-d3

在reactjs中 - 我会像这样导入它

import * as d3 from "d3";

但是当我尝试这样做时 - 我会收到导入错误。

Could not find module `ember-d3` imported

仅适用于d3

Could not find module `d3` imported

d3有两个依赖项吗？

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

Answer 1

安装browserify后

npm install --save-dev browserify d3

我设法通过使用此方法访问d3.js

import d3 from "npm:d3";

我将图表包装在像这样的div中

this.$('.wrapper')

表示图表的样式

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

所以在我的ember中的折线图看起来像这样。

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

    }

});

风格/线路chart.scss

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

和app.scss里面 - 我这样导入

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

模板/组件/线路chart.hbs

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

以及您希望它出现的位置。

{{line-chart}}

Ember和d3v4导入错误

1 个答案: