нарисовать два круга, используя D3 и добавив SVG - PullRequest
Новая
       14

нарисовать два круга, используя D3 и добавив SVG

0 голосов
/ 29 января 2020

Я пытаюсь нарисовать два круга, используя D3 и добавляя SVG. Приведенный ниже код не дает желаемого результата. Это др aws первый зеленый круг, но не следующий. Пожалуйста, помогите мне понять, что не так с кодом, приведенным ниже ... 

   <!DOCTYPE HTML>
    <html>
    <head>
    <title>Selection Method
    </title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    </head>
    <body>
    <script>
    d3.select("body")
      .append("svg")
        .attr("width", 960)
        .attr("height", 500)
        .style('background', '#dff0d8')
      .append("g")
        .attr("transform", "translate(0,0)")
      .append("circle")
        .attr("cx", 20)
        .attr("cy", 20)
        .attr("r", 10)
        .attr("fill", "green")
    .append("circle")
        .attr("cx", 70)
        .attr("cy", 70)
        .attr("r", 10)
        .attr("fill", "black") 
    </script>
    </body>

1 Ответ

2 голосов
/ 29 января 2020

Ваш код пытается добавить вторую circle к первой circle. Простое «превышение» кода не меняет область действия.

Вот тривиальное изменение, которое dr aws то, что вы, вероятно, ожидаете: 

d3.select("body")
  .append("svg")
    .attr("width", 960)
    .attr("height", 500)
    .style('background', '#dff0d8')
  .append("g")
    .attr("transform", "translate(0,0)")
  .append("circle")
    .attr("cx", 20)
    .attr("cy", 20)
    .attr("r", 10)
    .attr("fill", "green")
d3.select('g')  // <- Note the reselection of the existing 'g' element
    .append("circle")
    .attr("cx", 70)
    .attr("cy", 70)
    .attr("r", 10)
    .attr("fill", "black") 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
...