Circle Packing溢出问题

[Smacricket]

import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';
let chartData = [
  {
    name: "方太",
    children: [
      {
        name: "碧桂园",
        value: 10
      }, {
        name: "中国恒大",
        value: 20
      }, {
        name: "万科地产",
        value: 30
      }, {
        name: "融创中国",
        value: 24
      }, {
        name: "xx地产",
        value: 24
      }, {
        name: "cc地产",
        value: 24
      }, {
        name: "yy地产",
        value: 24
      }, {
        name: "zz地产",
        value: 24
      }
    ]
  }
];

chartData.forEach(data => {
    const dv = new DataSet.View().source(data, {
      type: 'hierarchy',
    });
    dv.transform({
      type: 'hierarchy.circle-packing',
    });
    const diameter = Math.min(window.innerWidth, 500);

    const chart = new Chart({
      container: 'container',
      height: diameter,
      width: diameter,
      padding: 0,
    });
    chart.axis(false);
    chart.legend(false);
    chart.tooltip({
      showTitle: false,
      showMarkers: false,
    });

    const nodes = dv.getAllNodes().map((node) => ({
      hasChildren: !!(node.data.children && node.data.children.length),
      name: node.data.name.split(/(?=[A-Z][^A-Z])/g).join('\n'),
      value: node.value,
      depth: node.depth,
      x: node.x,
      y: node.y,
      r: node.r,
    }));

    chart.data(nodes);
    chart.scale({
      x: {
        max: 1
      },
      y: {
        max: 1
      },
    });

    chart
      .point()
      .position('x*y')
      .color('hasChildren')
      .shape('circle')
      .tooltip('name')
      .size('r', (r) => r * diameter)
      .color('r', 'rgb(252, 253, 191)-rgb(231, 82, 99)-rgb(183, 55, 121)')
      .style({
        stroke: 'rgb(183, 55, 121)',
      })
      .label('name', {
        offset: 0,
        style: {
          textBaseline: 'middle',
          fill: 'grey',
          fontSize: 9,
          textAlign: 'center',
        },
        layout: {
          type: 'fixed-overlap',
        },
      });
    chart.interaction('element-active');

    chart.render();
  });

有搜索到2018年的相关文章，那时候是用chart.source，但是现在已经废弃了，是通过scale来配置，请问怎么解决以上问题

[hustcc]

官网 DEMO 上我看是 ok 的 https://g2.antv.vision/zh/examples/relation/relation#circle-packing

你的代码中 chartData forEach 之后绘图是什么逻辑？

[Smacricket]

官网 DEMO 上我看是 ok 的 https://g2.antv.vision/zh/examples/relation/relation#circle-packing

你的代码中 chartData forEach 之后绘图是什么逻辑？

只是我有多个这个关系图，需要单独渲染，所以一个forEach，数据结构的一样的，这跟forEach是什么逻辑有关？？？

[hustcc]

你先渲染 chartData[0] 试试，因为你绘制到同一个 container 中了，不确定会不会影响。

[Smacricket]

你先渲染 chartData[0] 试试，因为你绘制到同一个 container 中了，不确定会不会影响。

拆开了，还是一样的

import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';
let data = {
    name: "方太",
    children: [
      {
        name: "碧桂园",
        value: 10
      }, {
        name: "中国恒大",
        value: 20
      }, {
        name: "万科地产",
        value: 30
      }, {
        name: "融创中国",
        value: 24
      }, {
        name: "xx地产",
        value: 24
      }, {
        name: "cc地产",
        value: 24
      }, {
        name: "yy地产",
        value: 24
      }, {
        name: "zz地产",
        value: 24
      }
    ]
  };

    const dv = new DataSet.View().source(data, {
      type: 'hierarchy',
    });
    dv.transform({
      type: 'hierarchy.circle-packing',
    });
    const diameter = Math.min(window.innerWidth, 300);

    const chart = new Chart({
      container: 'container',
      height: diameter,
      width: diameter,
      padding: 0,
    });
    chart.axis(false);
    chart.legend(false);
    chart.tooltip({
      showTitle: false,
      showMarkers: false,
    });

    const nodes = dv.getAllNodes().map((node) => ({
      hasChildren: !!(node.data.children && node.data.children.length),
      name: node.data.name.split(/(?=[A-Z][^A-Z])/g).join('\n'),
      value: node.value,
      depth: node.depth,
      x: node.x,
      y: node.y,
      r: node.r,
    }));

    chart.data(nodes);
    chart.scale({
      x: {
        nice: true
      },
      y: {
        nice: true
      },
    });

    chart
      .point()
      .position('x*y')
      .color('hasChildren')
      .shape('circle')
      .tooltip('name')
      .size('r', (r) => r * diameter)
      .color('r', 'rgb(252, 253, 191)-rgb(231, 82, 99)-rgb(183, 55, 121)')
      .style({
        stroke: 'rgb(183, 55, 121)',
      })
      .label('name', {
        offset: 0,
        style: {
          textBaseline: 'middle',
          fill: 'grey',
          fontSize: 9,
          textAlign: 'center',
        },
        layout: {
          type: 'fixed-overlap',
        },
      });
    chart.interaction('element-active');

    chart.render();

[Smacricket]

你先渲染 chartData[0] 试试，因为你绘制到同一个 container 中了，不确定会不会影响。

你能给我解释一下scale具体的用法吗，我尝试这改成下面就会全部到中间

[hustcc]

chart.scale({
      x: {
        min: 0,
        max: 1,
      },
      y: {
        min: 0,
        max: 1,
      },
    });

x y 是布局之后的 0 ~ 1 的位置。如果不设置 min = 0, max = 1，算法会自动去位置中的最大值和最小值。所以产生位置偏移。

官网上数据量大，所以没有体现出来，你的数据量小导致出现问题。