D3.js（四）------------交互

制作柱状图的技巧

有一些基本规则：

• 避免使用 3D 效果；
• 直观地排序数据点 - 按字母顺序或按数字排序；
• 柱条之间保持一定距离；
• y 轴从 0 开始，而不是从最小值开始；
• 使用统一的颜色；
• 添加轴标签、标题、导引线。

D3.js 网格系统

在背景中添加 栅格线 突出那些值。

垂直和 水平 的线都可以添加，但是建议是只添加一种。过多的线会分散注意力。以下代码片段演示了如何添加水平和垂直的栅格。

• axis.tickSize([inner,outer])

  设定或获取坐标轴的内外刻度的长度。默认都为6

• axis.innerTickSize([size])

  设定或获取坐标轴的内刻度的长度。内刻度指不是两端的刻度。

• axis.outerTickSize([size])

  设定或获取坐标轴的外刻度的长度。外刻度指两端的刻度。

• asix.tickFormat([format])

  设定或获取刻度的格式。

// 添加垂直的栅格
chart.append('g')
    .attr('class', 'grid')
    .attr('transform', `translate(0, ${
     height})`)
    .call(d3.axisBottom()
        .scale(xScale)
        .tickSize(-height, 0, 0)
        .tickFormat(''))
// 添加水平的栅格
chart.append('g')
    .attr('class', 'grid')
    .call(d3.axisLeft()
        .scale(yScale)
        .tickSize(-width, 0, 0)
        .tickFormat(''))

D3.js 中的标签

文字指导，为坐标轴添加标签。

• 它们可以使用 x 和 y 坐标定位，文本对齐是通过 text-anchor属性实现的。
• 添加标签文字，只需 调用文本元素上的 text 方法。

// 添加百分比
    barGroups
      .append("text")
      .attr("class", "value")
      .attr("fill", "#fff")
      .attr("x", a => xScale(a.language) + xScale.bandwidth() / 2)
      .attr("y", a => yScale(a.value) + 30)
      .attr("text-anchor", "middle")