параллельные координаты: настройка цвета в зависимости от значения измерения

Я пытаюсь изменить цвет обводки в соответствии со значением размера: статус 0 = красный, статус 1 = зеленый, статус 3 = оранжевый

Я пытаюсь использовать библиотеку параллельных координат: https://syntagmatic.github.io/parallel-coordinates/< /а>

Там есть пример, но он слишком сложный, и я не мог заставить его работать, может ли кто-нибудь сказать мне, как применить это на простом примере здесь?

      pcz = d3.parcoords()("#example")
    .data(data)
    .hideAxis([])
    .composite("darken")
    .render()
    .alpha(0.35)
    .brushMode("1D-axes")  // enable brushing
    .interactive()  // command line mode

или, может быть, один из простого примера?

    <script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3.parcoords.js"></script>
<link rel="stylesheet" type="text/css" href="d3.parcoords.css">
<div id="example" class="parcoords" style="width:360px;height:150px"></div>

<script>
var data = [
  [0,-0,0,0,0,3 ],
  [1,-1,1,2,1,6 ],
  [2,-2,4,4,0.5,2],
  [3,-3,9,6,0.33,4],
  [4,-4,16,8,0.25,9]
];

var pc = d3.parcoords()("#example")
  .data(data)
  .render()
  .createAxes();
</script>
    enter code here

person OpenStove    schedule 25.08.2016    source источник
comment
Не могли бы вы рассказать немного больше о том, как это будет выглядеть? Вы хотите изменить цвет обводки каждой линии, когда она проходит через разные размеры, в зависимости от значения? У вас есть макет?   -  person Henry S    schedule 26.08.2016


Ответы (1)


Вам нужно передать функцию параметру цвета при инициализации, например:

var color = function(d) {
    if (d['displacement (cc)'] < 100) {
        return 'black';
    } else if (d['displacement (cc)'] > 400) {
        return 'red';
    } else {
        return 'yellow';
    }
};
var parcoords = d3.parcoords()("#example")
    .color(color)
    .alpha(0.4);
person BroHammie    schedule 08.02.2017