Javascript D3绑定文本和SVG

我正在创建我的第一个d3.js项目，其中的圆圈可以通过居中文本进行拖动、添加或删除，但我似乎无法将文本绑定到圆圈。我看到了一些问题，但我希望这是足够不同的，因为我试图应用解决方案，但他们没有工作。我不仅在寻找解决方案，而且想知道我在这里做错了什么

任何见解都会非常有用

我尝试创建一个组变量

group

，并假设可以使用它来绑定这两个元素。我的思维模式有什么问题

chart = {

  const dataset = [
  {start: new Date("2019-09-23 1:00 AM"), target: 70},
  {start: new Date("2019-09-23 8:00 AM"), target: 75},
  {start: new Date("2019-09-23 9:00 PM"), target: 70},
  {start: new Date("2019-09-23 1:00 PM"), target: 75},
  {start: new Date("2019-09-23 5:00 PM"), target: 70},
  {start: new Date("2019-09-23 6:00 PM"), target: 65},
]

  var xScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function(d) {
      return d.x_pos
    })]).range([0, width]);

  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height])
      .attr("stroke-width", 2);

    svg.append("g")
      .call(xAxis)

  var group = svg.selectAll('g')
  .data(dataset)
  .enter()
  .append("g")
  .attr("transform", 
        "translate(" + margin.left + "," + margin.top + ")")

   group.append("circle")
     .data(dataset)
     .enter()
     .append("circle")
     .join("circle")
     .attr("cx", d => x(d.start))
     .attr("cy", 55)
     .attr("r", 30)
     .attr("fill", "red")
     .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended))
    .on("click", removeElement);

  group.append("text")
    .data(dataset)
    .enter()
    .append("text")
    .attr("x", function(d) { return x(d.start) - 10; })
    .attr("y", function(d) { return 60; })
    .style("fill", "white")
    .text(function(d) { return d.target })
   .call(d3.drag()
    .on("drag", dragged))
   .on("click", removeElement)


  svg.on("click", function() {
    var coords = d3.mouse(this);

    var newData = {
      x: d3.event.x,
      y: d3.event.y,
      target: 0
    };

    dataset.push(newData);

    group.append("circle")
      .attr("cx", function(d) {
        return x(d.start);
      })
      .attr("cy", function(d) {
        return 55;
      })
      .attr("r", 30)
      .style("fill", "red")
      .attr('id', function(d, i) {
        return 'circle_' + i;
      })
      .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended))
      .on("click", removeElement);

    group.append("text")
    .data(dataset)
    .enter()
    .append("text")
    .attr("x", function(d) { return x(d.start) - 10; })
    .attr("y", function(d) { return 60; })
    .style("fill", "white")
    .text(function(d) { return d.target })
   .call(d3.drag()
   .on("drag", dragged))
   .on("click", removeElement)

  })

  function dragstarted(d) {
    d3.select(this).raise().attr("stroke", "black");
  }

  function dragged(d) {
    // tried adding .select("circle") from prior SO posts
    d3.select(this)
      .attr("cx", d.x = d3.event.x)
      .attr("cy", d.y = 55);
    d3.select(this) //.select("text")
      .attr("x", d.x = d3.event.x - 10)
      .attr("y", d.y = 60);
  }

  function dragended(d) {
       d3.select(this).attr("stroke", null);
  }

  function removeElement(d) {
    d3.event.stopPropagation()
    d3.select(this)
      .remove();
  }

  return svg.node();
}

x=d3.scaleTime（）
.domain（[新日期（“2019年9月23日凌晨12:00”）、新日期（“2019年9月23日晚上11:59”））
.rangeRound（[margin.left，width-margin.right]）
间隔=d3.时间小时。每隔（1）
xAxis=g=>g
.attr（“transform”，`translate（0，${height-margin.bottom}）`）
.call（g=>g.append（“g”）
.call（d3.axisBottom（x）
.滴答声（间隔）
.tickSize（-height+margin.top+margin.bottom）
.tickFormat（（）=>null））
.call（g=>g.select（“.domain”）
.attr（“填充”、“ddd”）
.attr（“笔划”，空））
.call（g=>g.selectAll（“.tick line”）
.attr（“笔划”、“fff”）
.attr（“笔划不透明度”，d=>d g.append（“g”）
.call（d3.axisBottom（x）
.滴答声（d3.时间小时）
.1（0））
.attr（“文本锚定”，null）
.call（g=>g.select（“.domain”）.remove（）
.call（g=>g.selectAll（“text”）.attr（“x”，6）））
边距=（{顶部：10，右侧：0，底部：20，左侧：0}）
高度=120
d3=需要（“d3@5")

---

链接到笔记本：

您需要将svg视为一组元素，其中元素也可以是一组元素

有一个圆圈里面有文字是什么样子的

<svg...>
    <g id="myGroup">
          <circle style="" cx="250" cy="250" r="245"></circle>
          <text x="50%" y="50%" stroke="#111"> Hello !</text>
    </g>
</svg>

---

将圆和文本绑定到一个组中。然后拖动组，而不是圆；）

50%50%将文本居中放置在viewbox中心，而不是组中心

<svg...>
    <g id="myGroup">
          <circle style="" cx="250" cy="250" r="245"></circle>
          <text x="50%" y="50%" stroke="#111"> Hello !</text>
    </g>
</svg>

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var group = document.createElementNS("http://www.w3.org/2000/svg","g");
group.setAttribute("id","myGroup")
var newCircle = document.createElementNS(svgNS,"circle"); 
var newText = document.createElementNS(svgNS,"text");
newText.setAttributeNS(null,"x", "50%");     
newText.setAttributeNS(null,"y", "50%"); 
document.getElementById("svg").appendChild(myGroup);
document.getElementById("myGroup").appendChild(newCircle);