Javascript D3版本4：Axis没有完整的D3.js

我是d3新手，我用整个d3.js创建了一些图形，它工作得非常好。但是在构建了整个JavaScript之后，我发现最终的JavaScript文件对于mobile来说太大了

经过一些研究，我发现d3提供了一些独立的模块（例如：d3形状、d3轴、d3比例）

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

我只需要一个有x轴和y轴的条形图。我借助d3形状创建的“反应”条形图：

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

let max=Math.max.apply（Math，this.props.data.map（函数（o）{return o.x；}））
最大值=最大值+5；
设yScale=d3_scale.scaleLinear（）
.domain（[0，最大值]）
.范围（[0，此道具高度]）；
设xScale=d3u scale.scaleLinear（）
.domain（[0，this.props.data.length]）
.范围（[0，此.道具宽度]）；
让getColor=this.getColor.bind（this）
设barWidth=this.getBarWidth（）
设bar=this.props.data.map（函数（点，i）{
log（“点”，点，点['x']））
返回(
)
});
返回(
{bar}
);

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

render（）{
返回(
)
}

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

你们中有谁能向我解释一下我如何在不加载整个d3.js的情况下将axis添加到这个条形图中

谢谢 马塞尔

2016年6月29日更新：

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

---

对于此票证：这是帮助信息

您是否尝试使用

d3.min.js

？只有140kb是的，我用过这个。但目前的解决方案是d3形状，d3轴和d3的大小约为20-23KB。这是一个巨大的不同。顺便说一句：React太多了，但我无法改变这一点：/您使用的是

d3_scale

，一个不需要

d3

的独立模块。这里到底有什么问题？如何在条形图中添加轴？如果不使用整个d3.js，您是否尝试使用

d3.min.js

？只有140kb是的，我用过这个。但目前的解决方案是d3形状，d3轴和d3的大小约为20-23KB。这是一个巨大的不同。顺便说一句：React太多了，但我无法改变这一点：/您使用的是

d3_scale

，一个不需要

d3

的独立模块。这里到底有什么问题？如何在条形图中添加轴？而不使用整个d3.js