javascript - 如何使钢筋的上部变圆？

问题描述

下面是显示条形图的代码。

如何使每个条的顶部边缘变圆？即每个条的顶部都应该像圆顶形状一样圆一些半径。

我尝试了'rx' attr，但它正在塑造顶部和底部。还有其他方法吗？我保留了下面的代码片段以供运行和检查。

      var data = [
        {
          model_name: "f1",
          field1: 40,
        },
        {
          model_name: "f2",
          field1: 19,
        },
        {
          model_name: "f3",
          field1: 49,
        },
      ];

      var margin = { top: 10, right: 10, bottom: 10, left: 50 },
        width = 500,
        height = 400,
        barPadding = 0.2,
        axisTicks = { outerSize: 0 };

      var svg = d3
        .select("body")
        .append("svg")
        .attr("viewBox", [0, 0, width, height]);

      var xscale = d3
        .scaleBand()
        .range([margin.left, width - margin.right])
        .padding(barPadding);

      xscale.domain(data.map((d) => d.model_name));

      var yScale = d3
        .scaleLinear()
        .range([height - margin.top - margin.bottom, margin.top]);

      yScale.domain([0, d3.max(data, (d) => d.field1)]);

      var xaxis = d3.axisBottom(xscale).tickSizeOuter(axisTicks.outerSize);
      var yaxis = d3
        .axisLeft(yScale)
        .tickSize(5)
        .tickFormat(function (d) {
          return d;
        });

      svg
        .append("g")
        .attr("class", "x axis")
        .attr(
          "transform",
          `translate(0,${height - margin.top - margin.bottom})`
        )
        .call(xaxis);

      svg
        .append("g")
        .attr("class", "y axis")
        .attr("transform", `translate(${margin.left},0)`)
        .call(yaxis);

      var model_name = svg
        .selectAll(".model_name")
        .data(data)
        .enter()
        .append("g")
        .attr("class", "model_name")
        .attr("transform", (d) => `translate(${xscale(d.model_name)},0)`);

      model_name
        .selectAll(".bar.field1")
        .data((d) => [d])
        .enter()
        .append("rect")
        .attr("class", "bar field1")
        .style("fill", "skyblue")
        .attr("x", () => xscale("field1"))
        .attr("y", (d) => yScale(d.field1))
        .attr("width", xscale.bandwidth())
        .attr("height", (d) => {
          return height - margin.bottom - margin.top - yScale(d.field1);
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

我正在努力实现的示例图片

标签： javascripthtmld3.js

javascript - 如何使钢筋的上部变圆？

问题描述

解决方案

推荐阅读