D3. js V5 дерево в формате SVG - PullRequest
Новая
       6

D3. js V5 дерево в формате SVG

1 голос
/ 28 апреля 2020

Я создаю три svg paint board в элементе body, и я хочу создать древовидную схему в первом svg. Но макет дерева всегда отображается в конце. Я не могу найти ошибку в моих кодах. 3Q

результат в html: html результат

my d3. js (v5) код, показанный ниже: 

var svg = body.append('svg')
  .attr('width', width)
  .attr('height', height)
svg.append('rect')
  .attr('width', '100%')
  .attr('height', '100%')
  .attr('fill', 'rgb(255, 100, 100)')

d3.json('map_tree.json').then(function(datas){

  var root = d3.hierarchy(datas)
  var tree = d3.tree()
    .size([height, width-120])
    .separation(function separation(a, b){
      return a.parent == b.parent ? 1:2
    })
  tree(root)

  svg.append('g')
    .selectAll('circle')
    .data(root.descendants())
    .enter()
    .append('circle')
    .attr('r', 4)
    .attr('transform', 'translate(50, 0)')
    .attr('fill', 'white')
    .attr('stroke', 'blue')
    .attr('stroke-width', 1)
    .attr('cx', function(d, i){
      return d.y
    })
    .attr('cy', function(d, i){
      return d.x
    })
    .attr('cx', function(d, i){
      return d.y
    })
    .attr('cy', function(d, i){
      return d.x
})

var svg = body.append('svg')
  .attr('width', width)
  .attr('height', height)
svg.append('rect')
  .attr('width', '100%')
  .attr('height', '100%')
  .attr('fill', 'rgb(100, 255, 100)')

var svg = body.append('svg')
  .attr('width', width)
  .attr('height', height)
svg.append('rect')
  .attr('width', '100%')
  .attr('height', '100%')
  .attr('fill', 'rgb(100, 100, 255)')

1 Ответ

0 голосов
/ 30 апреля 2020

Я нашел причину. Я создал более одного d3.select ('doby'). Append ('svg') с именем svg, и проблема исчезла, когда я назвал других с помощью svg1 、 svg2

...