Макет пакета D3 с переменным заполнением

Question

Я не могу получить переменную, используя d3.layout.pack (). Padding ().Я хочу разместить разные отступы в группе и в конечных узлах.

        d3.layout.pack()
        .sort(null)
        .size([this.width , this.height])
        .children(function (d) {
            return d.values;
        })
        .value(function (d){
            return 1;
        })
        .padding(function (d){
            return d.padding;
        })
        .nodes({
            values: outerClusterData
        })


        // Sample data 
        outerClusterData = [
            {
                key: "africa",
                padding: 100,
                values: [
                    {
                        name: "city1",
                        padding: 10
                    },
                    {
                        name: "city2",
                        padding: 10 
                    }
                ]
            },
            {
                key: "India",
                padding: 100,
                values: [
                    {
                        name: "city3",
                        padding: 10
                    },
                    {
                        name: "city4",
                        padding: 10 
                    }
                ] 
            }
        ]

Выше мой код.Любая помощь будет принята с благодарностью.

Спасибо, Ankit

Answer 1

Рассмотрим структуру следующим образом:

<svg>
 <g class="content-group">
</svg>

Шаг 1: Установите минимальный радиус с помощью средства доступа к радиусу на некоторое постоянное значение.

Шаг 2: После шага 1 сгруппированный круг будетбудь тихим большим, так как радиус сгруппированного круга равен отступу + пространство, занимаемое внутренними кругами

Шаг 3: Установите ViewPort, используя высоту и ширину, используя атрибуты высоты и ширины, Как только содержимое нарисовано, получите ограничивающий прямоугольникg.content-group, используя d3.select ('g.content-group'). node (). bbox (). Это даст вам x, y, высоту, ширину.Который может использоваться для установки атрибутов viewbox = "высота ширины xy"

Позволяет области просмотра быть widthVP * heightVP, и viewBox быть "высотой xy width", тогда у новой системы координат будет единица, которая будетравно widthVP / width в направлении x и heightVP / height в направлении y.

Спасибо, Ankit