WedX - журнал о программировании и компьютерных науках

Кривая графика реакции d3 + vx плоская в каждой точке данных

Я пытаюсь построить что-то вроде https://dribbble.com/shots/2673159-Funnel-UI-concept/attachments/538068

Я просмотрел все кривые, предоставленные d3 / vx, и, похоже, ни одна из них не имеет кривой между каждым отдельным шагом с плоской линией в точке данных. Есть ли тип кривой, который мне не хватает, который был бы похож на приведенный выше? Если нет, и для этого нужна настраиваемая кривая, есть ли где-нибудь более подробное описание того, как реализовать настраиваемые кривые, чем в документации d3?

18.03.2019

Ответы:


1

Стандартной кривой для этого не существует; однако это может быть возможно, если продублировать добавление дополнительных точек, чтобы заставить стандартную кривую d3 быть плоской там, где это необходимо. Например, добавление точек до и после этапа меняется на одно и то же значение y.

Однако настраиваемая кривая может работать и избавить от необходимости манипулировать данными. Кривая Безье должна помочь. С исходными, конечными и контрольными точками, например:

введите описание изображения здесь

Изображение из этого кода

Чтобы реализовать эту идею, мы можем заменить точечную функцию в стандартной кривой, такой как d3.curveLinear, на ту, которая рисует кривую Безье.

Точечная функция d3.curveLinear для сравнения:

  function(x, y) {
    x = +x, y = +y;
    switch (this._point) {
      case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;
      case 1: this._point = 2; // proceed
      default: this._context.lineTo(x, y); break;
    }

И новая функция точки:

  function(x,y) {
    x = +x, y = +y;
    switch (this._point) {
      case 0: this._point = 1; 
        this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
        this.x0 = x; this.y0 = y;        
        break;
      case 1: this._point = 2;
      default:  
        var x1 = this.x0 * 0.5 + x * 0.5;
        this._context.bezierCurveTo(x1,this.y0,x1,y,x,y); // bezierCurveTo(controlPoint1X,controlPoint1Y,controlPoint2X,controlPoint2Y,endPointX,endPointY)
        this.x0 = x; this.y0 = y;        
        break;
    }
  }
  return custom;
}

Я использую одно и то же значение x для каждой контрольной точки, это может быть не идеально, поскольку они могут быть недостаточно плоскими на концах, но это легко изменить

Мы можем создать собственную кривую, используя d3.curveLinear и подставив в эту новую точечную функцию:

var curve = function(context) {
  var custom = d3.curveLinear(context);
  custom._context = context;
  custom.point = function(x,y) {
    x = +x, y = +y;
    switch (this._point) {
      case 0: this._point = 1; 
        this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
        this.x0 = x; this.y0 = y;        
        break;
      case 1: this._point = 2;
      default: 
        var x1 = this.x0 * 0.5 + x * 0.5;
        this._context.bezierCurveTo(x1,this.y0,x1,y,x,y); 
        this.x0 = x; this.y0 = y;        
        break;
    }
  }
  return custom;
}

Это работает достаточно легко:

var curve = function(context) {
  var custom = d3.curveLinear(context);
  custom._context = context;
  custom.point = function(x,y) {
    x = +x, y = +y;
    switch (this._point) {
      case 0: this._point = 1; 
        this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
        this.x0 = x; this.y0 = y;        
        break;
      case 1: this._point = 2;
      default: 
        var x1 = this.x0 * 0.5 + x * 0.5;
        this._context.bezierCurveTo(x1,this.y0,x1,y,x,y);
        this.x0 = x; this.y0 = y;        
        break;
    }
  }
  return custom;
}

var data = [
 [10,10],
 [160,50],
 [310,100]
];

var line = d3.line()
  .curve(curve);
  
d3.select("svg")
  .append("path")
  .attr("d",line(data));
  
d3.select("svg")
  .selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("transform", function(d) {
    return "translate("+d+")";
  })
  .attr("r",3)
path {
  fill: none;
  stroke: black;
  stroke-width:1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="500"></svg>

А вот демонстрация области, которая рисует воронку для каждого этапа. В зависимости от ваших данных это может быть или не быть предпочтительным. Мои поддельные данные структурированы по этапам, поэтому проще всего нарисовать каждый этап индивидуально. Объединить все этапы в один путь / область может быть немного сложнее.

var curve = function(context) {
  var custom = d3.curveLinear(context);
  custom._context = context;
  custom.point = function(x,y) {
    x = +x, y = +y;
    switch (this._point) {
      case 0: this._point = 1; 
        this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
        this.x0 = x; this.y0 = y;        
        break;
      case 1: this._point = 2;
      default: 
        var x1 = this.x0 * 0.5 + x * 0.5;
        this._context.bezierCurveTo(x1,this.y0,x1,y,x,y);
        this.x0 = x; this.y0 = y;        
        break;
    }
  }
  return custom;
}

var data = [
  {stage:1, start:1,end:0.5},
  {stage:2, start:0.5,end:0.2},
  {stage:3, start:0.2,end:0.1},
  {stage:4, start:0.1,end:0.005}
]

var yRangeMax = 100;
var y = d3.scaleLinear()
  .range([yRangeMax,0]);
  
var x = d3.scaleBand()
  .range([50,400])
  .domain(data.map(function(d) {
    return d.stage;
  }))

var svg = d3.select("svg");
 
var area = d3.area()
  .curve(curve)
  .y1(function(d) { return yRangeMax*2-d[1]; })
  .y0(function(d) { return d[1]; })

svg.selectAll(null)
  .data(data)
  .enter()
  .append("path")
  .attr("d", function(d) {
    var p1 = [x(d.stage),y(d.start)]
    var p2 = [x(d.stage)+x.step(),y(d.end)]
    return area([p1,p2])
  })
path{
  stroke: #bbb;
  stroke-width: 1px;
  fill:#ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.6.0/d3.min.js"></script>
<svg width="600" height="400"></svg>

Что касается руководства по пользовательским кривым, я не видел много ресурсов. Однако эти ответы (a, b) может оказаться полезным.

19.03.2019
Новые материалы

Как создать диаграмму градиентной кисти с помощью D3.js
Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


Для любых предложений по сайту: [email protected]