d3v4棒棒糖图表-重构转换-静态

Question

-最终目标

-当前尝试

我有兴趣将d3v3棒棒糖图表改编为v4。

ref-https://bl.ocks.org/laysent/5739f087ec78e4386a6a

//版本3 https://jsfiddle.net/urmtj3v4/1/

//第4版-更简单的变体-使用占位符圆作为POC https://jsfiddle.net/ynmcfk3a/1/

^，但是圆圈没有正确地放置在茎上-它们似乎偏移了-当前计算的问题

                var lolliradian = 20;

                lollipop.selectAll("circle")
                  .data(data)
                  .enter()
                  .append("circle")
                  //.transition()
                  //.duration(1000)
                    .attr("cx", function(d) { return x(d.label) - x.bandwidth()/2 + lolliradian/2 ; })
                    .attr("cy", function(d) { return y(d.value); })
                    .attr("r", lolliradian)
                    .attr("fill", "#69b3a2");

Answer 1

我设法完成了图表的转换。

// d3v4棒棒糖图表I https://jsfiddle.net/ynmcfk3a/1/

带有圆形提示的混合条形图。

棒棒糖I

FROM amazonlinux:2 as installer
COPY awscli-exe-linux-x86_64.zip .
RUN yum update -y \
  && yum install -y unzip \
  && unzip awscli-exe-linux-x86_64.zip \
  # The --bin-dir is specified so that we can copy the
  # entire bin directory from the installer stage into
  # into /usr/local/bin of the final stage without
  # accidentally copying over any other executables that
  # may be present in /usr/local/bin of the installer stage.
  && ./aws/install --bin-dir /aws-cli-bin/

FROM amazonlinux:2
RUN yum update -y \
  && yum install -y less groff \
  && yum clean all
COPY --from=installer /usr/local/aws-cli/ /usr/local/aws-cli/
COPY --from=installer /aws-cli-bin/ /usr/local/bin/
WORKDIR /aws
ENTRYPOINT ["/usr/local/bin/aws"]