возможность двойного представления кредита в D3js

Question

возможность двойного представления кредита в D3js

1

возможно ли сделать что-то подобное в d3js, и как?

Если нет, есть ли еще один js lib для этого?

Спасибо !

Laurent Grousset 29 июнь 2017, в 16:47

Источник

0

Да: просто нарисуйте синий прямоугольник перед оранжевым.
Gerardo Furtado 29 июнь 2017, в 14:48
0

@GerardoFurtado Буду признателен, если вы предоставите мне образец. Я только начал использовать эту библиотеку.
Laurent Grousset 29 июнь 2017, в 14:50
0

Извините, но нет: я не буду писать код с нуля. Если вы предоставите свой код (даже не работающий) со своими данными, я могу вам помочь.
Gerardo Furtado 29 июнь 2017, в 14:51
0

@GerardoFurtado Я начал работать на основе примера в сети. jsfiddle.net/h89bbp2b "данные", представляющие мои кредиты, вы знаете, почему я ничего не вижу?
Laurent Grousset 29 июнь 2017, в 15:33
0

Ты сделал хорошую работу. Сравните эту скрипку с моим кодом, чтобы увидеть, что не сработало. Просто совет: не используйте такие циклы forEach для рисования элементов в коде D3.
Gerardo Furtado 30 июнь 2017, в 00:45

Показать ещё 3 комментария

Теги:

javascript

d3.js

1 ответ

Ещё вопросы

Да: просто нарисуйте синий прямоугольник перед оранжевым.
@GerardoFurtado Буду признателен, если вы предоставите мне образец. Я только начал использовать эту библиотеку.
Извините, но нет: я не буду писать код с нуля. Если вы предоставите свой код (даже не работающий) со своими данными, я могу вам помочь.
@GerardoFurtado Я начал работать на основе примера в сети. jsfiddle.net/h89bbp2b "данные", представляющие мои кредиты, вы знаете, почему я ничего не вижу?
Ты сделал хорошую работу. Сравните эту скрипку с моим кодом, чтобы увидеть, что не сработало. Просто совет: не используйте такие циклы forEach для рисования элементов в коде D3.

Gerardo Furtado · Accepted Answer · 2017-06-29T21-48-00.000Z

Для создания нужного вам dataviz вам нужно использовать линейную шкалу для обеих осей:

var x = d3.scaleLinear().range([0, width]),
    y = d3.scaleLinear().range([height, 0]);

Для доменов я добавляю 50% (т.е. Умножая на 1,5), для более приятного визуального:

x.domain([0, d3.max(data, function(d) {
    return d.duration;
}) * 1.5]);
y.domain([0, d3.max(data, function(d) {
    return d.monthly;
}) * 1.5]);

Затем используйте это, чтобы добавить прямоугольники:

var bars = g.selectAll(null)
    .data(data)
    .enter()
    .append("rect")
    .attr("width", function(d) {
        return x(d.duration);
    })
    .attr("height", function(d) {
        return height - y(d.monthly);
    })
    .attr("x", 0)
    .attr("y", function(d) {
        return y(d.monthly);
    })
    .attr("fill", function(d) {
        return colours(d.duration);
    });

Помните: для этого для работы данные для меньшего прямоугольника должны появиться после данных для более крупного.

Вот рабочая демонстрация:

var svg = d3.select("svg"),
  margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleLinear().range([0, width]),
  y = d3.scaleLinear().range([height, 0]);

var colours = d3.scaleOrdinal(d3.schemeCategory10);

var g = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data = [{
  monthly: 1258.5,
  duration: 212
}, {
  monthly: 1058.5,
  duration: 120
}];

x.domain([0, d3.max(data, function(d) {
  return d.duration;
}) * 1.5]);
y.domain([0, d3.max(data, function(d) {
  return d.monthly;
}) * 1.5]);

var bars = g.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("width", function(d) {
    return x(d.duration);
  })
  .attr("height", function(d) {
    return height - y(d.monthly);
  })
  .attr("x", 0)
  .attr("y", function(d) {
    return y(d.monthly);
  })
  .attr("fill", function(d) {
    return colours(d.duration);
  });

g.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

g.append("g")
  .attr("class", "axis axis--y")
  .call(d3.axisLeft(y).ticks(5)
    .tickSizeInner([-width]))
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", "0.71em")
  .attr("text-anchor", "end")
  .attr("fill", "#5D6971")
  .text("Average House Price - (£)");

body {
   background-color: #F1F3F3
 }
 
 .axis {
   font: 15px sans-serif;
 }
 
 .axis path,
 .axis line {
   fill: none;
   stroke: #D4D8DA;
   stroke-width: 1px;
   shape-rendering: crispEdges;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<svg width="600" height="400"></svg>