条形图 d3 条形下方的圆圈

// set the dimensions and margins of the graph
var margin = {
    top: 10,
    right: 30,
    bottom: 20,
    left: 50
  },
  width = 500 - margin.left - margin.right,
  height = 250 - 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
var data = [{
    group: "0",
    Nitrogen: "10"
  },
  {
    group: "1",
    Nitrogen: "30"
  },
  {
    group: "2",
    Nitrogen: "50"
  },
];
data.columns = ["group", "Nitrogen"];

// 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", "400")
  .attr("color", "lightgray");

// Add Y axis
var y = d3
  .scaleLinear(25)
  .domain([0, 75])
  .range([height, 0])

;

svg
  .append("g")
  .call(d3.axisLeft(y))
  .attr("font-size", "0.9rem")
  .attr("font-weight", "400")
  .attr("color", "lightgray")
  .attr("style", "transform: translate(0px, -12px);");

// 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(["#93B6F8"]);

// 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("class", "bar")
  .attr(
    "style",
    "padding-bottom: 8px; transform: translate(0px, -6px);"
  )
  .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);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="my_chart"></div>