小编Tru*_*yen的帖子

我需要使条形图的 x 轴标签（以及 y 轴标签）可见。在这种情况下，y-axis-label必须是：“失业率”，x-axis-label：越南的地区。通过 Chrome 的检查工具，我证明这些元素在那里，但它们只是被隐藏了。例如，y 轴标签：

• 创建了 y 轴标签的 HTML SVG 文本元素
• 显示屏显示此元素的选定区域
• 此元素的颜色是红色（我在 Chrome 中手动制作），与背景颜色不同。

截图和代码放在下面。我知道这一定是一些愚蠢的错误，但不幸的是我无法在 1 天后自己弄清楚。请帮忙。

JSfidle 链接：https ://jsfiddle.net/ngminhtrung/703exxc0/

var data = [{
    "area": "??ng b?ng sông H?ng",
    "age1": 9.62,
    "age2": 1.45,
    "age3": 20
  },
  {
    "area": "Trung du và mi?n núi phía B?c",
    "age1": 2.95,
    "age2": 20,
    "age3": 20
  },
  {
    "area": "B?c Trung B? và duyên h?i mi?n Trung",
    "age1": 8.26,
    "age2": 20,
    "age3": …

我越来越坚持的D3.js V4的动画的两线及区域：

• 线和面分开做动画就可以了
• 当 2 个动画组合在一起时，即使在相同的过渡持续时间内，它们也不会一起发生。
• 出于造型的原因，我不能放弃这条线。

请参阅下图：

为了使事情像上面一样，我做了两个大步骤：

1. 通过设置属性stroke-dasharrow和stroke-dashoffset. （灵感来自视觉肉桂）
2. 通过调整 d3.area() 函数的参数来制作区域动画（灵感来自其他 Stackoverlfow 帖子）

结果相当令人失望，因为下面的线和区域没有平行出现。

我的目标是模仿 Highchart 库，请参阅此处的示例及其插图：

Highchart 库似乎使用了不同的动画技术，因为在 DOM 检查期间，动画中的 DOM 路径没有任何变化的迹象。

如果有人可以向我建议一些可以尝试的想法，我们将不胜感激。

我的代码示例如下：

let animationDuration = 5000;
// set the dimensions and margins of the graph
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = 480 - margin.left - margin.right,
    height …