Question

我是d3的新手，我用整个d3.js创建了一些图表，它完美无缺。但是在构建完整个JavaScript之后，我发现最终的javascript文件对于移动来说太大了。

经过一些研究，我发现d3提供了一些独立的模块（p.e：d3-shape，d3-axis，d3-scale）。

这非常适合我，因为我使用React并喜欢将React用作可视化层。

我只需要一个带x轴和y轴的barChart。我在d3-shape的帮助下创建的“反应”条形图：

let max = Math.max.apply(Math, this.props.data.map(function(o){ return o.x; }))
    max = max + 5;

    let yScale = d3_scale.scaleLinear()
          .domain([0, max])
          .range([0, this.props.height]);

    let xScale = d3_scale.scaleLinear()
          .domain([0, this.props.data.length])
          .range([0, this.props.width]);

    let getColor = this.getColor.bind(this)

    let barWidth = this.getBarWidth()

    let bars = this.props.data.map(function(point, i) {
      console.log("point", point, point['x'])

      return (
        <Bar height={yScale(point['x'])} width={barWidth} offset={xScale(point['y'])} availableHeight={props.height} color={getColor(point.group)} key={i} />
      )
    });

    return (
      <g>{bars}</g>
    );

Bar.js

render() {
    return (
      <rect fill={this.props.color}
       width={this.props.width} height={this.props.height}
       x={this.props.offset} y={this.props.availableHeight - this.props.height} />
    )
  }

我用谷歌搜索了一个解决方案，但是每个例子都使用d3.svg ...这是目前整个d3包。

你是否有人能够向我解释如何在不加载整个d3.js的情况下将轴添加到此BarChart？

由于烫发

更新29.06.2016：

D3发布新版本4.0，现在有很好的例子：

此票证：https://github.com/d3/d3-axis/blob/master/README.md这是有帮助的

D3版本4：没有整个D3.js的轴

0 个答案: