Размер траектории центра солнечных лучей D3

Итак, у меня есть довольно стандартная диаграмма D3 «Солнечные лучи». Однако центральный путь (то есть корень) слишком велик. Он занимает большую часть моей диаграммы, которая тратится впустую, поскольку более важные дуги вокруг него борются за место.

Я собираюсь добавить метки на внешние кольца, но мне нужно больше места.

Смотри ниже.

Я хочу сделать центральный круг (светло-серый) меньше, а внешние кольца толще.

введите здесь описание изображенияКто-нибудь может мне помочь?

Вот мой код:

var width = 850,
      height = 700,
      padding = 6,
      duration = 750,
      labelLimit = 120,
      radius = Math.min(width, height) / 2 - 10;

    var x = d3.scale.linear()
      .range([0, 2 * Math.PI]);

    var y = d3.scale.sqrt()
      .range([0, radius]);

    var svg = d3.select("#wheel")
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("id", "scan")
      .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");

    var partition = d3.layout.partition()
      .value(function(d) { return d.size; });

    var arc = d3.svg.arc()
      .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
      .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
      .innerRadius(function(d) { return Math.max(0, y(d.y)); })
      .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

    var path = svg.selectAll("path")
      .data(partition.nodes(bp.data.preparedData))
      .enter()
      .append("path")
      //.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
      .attr("d", arc)
      .attr("id", function(d) { return d.ci_type === 'type' || d.ci_type === 'provider' ? d.name : ''; })
      .attr("class", 'context')
      .attr("data-toggle", 'context')
      .attr("data-target", '#context-menu')
      .attr("data-name", function(d) { return d.name; })
      .attr("data-type", function(d) { return d.type; })
      .attr("data-provider", function(d) { return d.provider; })
      .attr("data-ci_type", function(d) { return d.ci_type; })
      .style("fill", function(d) { return bp.draw.getColor(d); });

    var text = svg.selectAll("text")
      .data(partition.nodes(bp.data.preparedData));
    var textEnter = text.enter()
      .append("text")
      .style("fill-opacity", 1)
      .style("font-weight", 200)
      //.style("letter-spacing",1)
      .style("fill", function(d) { return bp.draw.getLabelColor(d); })
      .attr("font-size", function(d) { return d.ci_type === 'type' ? 12 : 16})
      .attr("text-anchor", function(d) {
        return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
      })
      .attr("dy", ".2em")
      .attr("transform", function(d) {
        var multiline = (d.name || "").split(" ").length > 1,
          angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
          rotate = angle + (multiline ? -.5 : 0);
          return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
      })
      .attr("class", 'cursor')
      .attr("data-toggle", 'context')
      .attr("data-target", '#context-menu')
      .attr("data-name", function(d) { return d.name; })
      .attr("data-type", function(d) { return d.type; })
      .attr("data-provider", function(d) { return d.provider; })
      .attr("data-ci_type", function(d) { return d.ci_type; })
    textEnter.append("tspan")
      .attr("x", 0)
      .text(function(d) { return d.depth ? d.name : ""; });

person Cheyne    schedule 08.10.2013    source источник
comment
вы передаете свой внутренний и внешний радиус x и y. Вы смотрели те? Если бы различия между каждым y были примерно одинаковыми, ваш внешний радиус был бы пропорционально меньше. Подумайте о графике y=sqrt(x).   -  person user1614080    schedule 09.10.2013
comment
Можете ли вы предложить изменение кода? Я не совсем понимаю, как работает этот раздел.   -  person Cheyne    schedule 09.10.2013
comment
попробуйте заменить var y = d3.scale.sqrt() на var y = d3.scale.linear(). Я действительно просто догадываюсь, не имея возможности запустить ваш код с вашими данными. Вы можете опубликовать его на js fiddle или js bin или bl.ocks?   -  person user1614080    schedule 09.10.2013
comment
Великолепно, это исправило. Теперь все кольца одинаковой ширины вместо одного гигантского шара в центре. Если вы хотите опубликовать свой ответ сверху в качестве ответа, я с радостью приму его. Большое спасибо!   -  person Cheyne    schedule 09.10.2013


Ответы (1)


Нелинейный отклик ширины кольца обусловлен квадратным корнем по шкале y в этой строке:

var y = d3.scale.sqrt()
      .range([0, radius]);

Если вам нужен линейный отклик, просто измените масштаб на линейный, как показано ниже:

var y = d3.scale.linear()
      .range([0, radius]);

Затем вы должны увидеть равномерно расположенные кольца.

person user1614080    schedule 09.10.2013