javascript - 添加边框半径条形图 d3

Question

我需要在图表的条形图上添加边框，我知道有一个插件可以添加它，我已经看到在同一平台上提出的其他问题，但我无法将它们添加到我的条形图，我需要帮助

window.addEventListener("load", (event) => {
  // set the dimensions and margins of the graph
  var margin = { top: 10, right: 30, bottom: 20, left: 50 },
    width = 1500 - margin.left - margin.right,
    height = 350 - margin.top - margin.bottom;

  // append the svg object to the body of the page
  var svg = d3
    .select("#my_chart")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // Parse the Data


  // List of subgroups = header of the csv files = soil condition here
  var subgroups = data.columns.slice(1);
  console.log(data);
  // List of groups = species here = value of the first column called group -> I show them on the X axis
  var groups = d3
    .map(data, function(d) {
      return d.group;
    })
    .keys();

  // Add X axis
  var x = d3.scaleBand()
    .domain(groups)
    .range([0, width])
    .padding([0.2]);
  svg
    .append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x)
      .tickSize(0))
    .attr("font-size", "0.9rem")
    .attr("font-weight", "700");

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 800])
    .range([height, 0]);
  svg
    .append("g")
    .call(d3.axisLeft(y))
    .attr("font-size", "0.9rem")
    .attr("font-weight", "700");

  // Another scale for subgroup position?
  var xSubgroup = d3
    .scaleBand()
    .domain(subgroups)
    .range([0, x.bandwidth()])
    .padding([0.05])

  ;

  // color palette = one color per subgroup
  var color = d3
    .scaleOrdinal()
    .domain(subgroups)
    .range(["#ffb741", "#e9e9e9", "#377eb8"]);

  // gridlines in y axis function
  function make_y_gridlines() {
    return d3.axisLeft(y)
      .ticks(10);
  }

  // add the Y gridlines
  svg
    .append("g")
    .attr("class", "grid")
    .call(make_y_gridlines()
      .tickSize(-width)
      .tickFormat(""));

  // Show the bars
  svg

    .append("g")
    .selectAll("g")
    // Enter in data = loop group per group
    .data(data)
    .enter()
    .append("g")
    .attr("transform", function(d) {
      return "translate(" + x(d.group) + ",0)";
    })
    .selectAll("rect")
    .data(function(d) {
      return subgroups.map(function(key) {
        return { key: key, value: d[key] };
      });
    })
    .enter()
    .append("rect")
    .attr("x", function(d) {
      return xSubgroup(d.key);
    })
    .attr("y", function(d) {
      return y(d.value);
    })
    .attr("width", xSubgroup.bandwidth())
    .attr("height", function(d) {
      return height - y(d.value);
    })
    .attr("fill", function(d) {
      return color(d.key);
    });
});

目前我是这样的:

但我需要的是 border-radius

我知道在这个平台上有很多关于这个主题的问题，但我不能在我的图表中应用它，我需要在我的图表中创建这些轮廓

Answer 1

<rect>元素有两个属性 rx和 ry可以用来给他们一个边界半径。另见 the docs .您不需要同时设置两者，如果您设置一个，另一个将采用相同的值。

var margin = {
    top: 20,
    right: 20,
    bottom: 70,
    left: 40
  },
  width = 600 - margin.left - margin.right,
  height = 300 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%Y-%m").parse;

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickFormat(d3.time.format("%Y-%m"));

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .ticks(10);

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

const data = d3.csvParseRows(`2013-01,53
2013-02,165
2013-03,269
2013-04,344
2013-05,376
2013-06,410
2013-07,421
2013-08,405
2013-09,376
2013-10,359
2013-11,392
2013-12,433
2014-01,455
2014-02,478`, function(row) {
  return {
    date: parseDate(row[0]),
    value: +row[1],
  };
});

x.domain(data.map(function(d) {
  return d.date;
}));
y.domain([0, d3.max(data, function(d) {
  return d.value;
})]);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", "-.55em")
  .attr("transform", "rotate(-90)");

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Value ($)");

svg.selectAll("bar")
  .data(data)
  .enter().append("rect")
  .style("fill", "steelblue")
  .attr('rx', 5)
  .attr("x", function(d) {
    return x(d.date);
  })
  .attr("width", x.rangeBand())
  .attr("y", function(d) {
    return y(d.value);
  })
  .attr("height", function(d) {
    return height - y(d.value);
  });

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>