Вопросы Теги

D3js: & ldquo; Как добавить разные пути для разных значений? & Rdquo;

Использование jQuery:

parent.html 

<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
iframe {
    width: 100%;
    border: 1px solid black;
}
</style>
<script>
function foo(w, h) {
    $("iframe").css({width: w, height: h});
    return true;  // for debug purposes
}
</script>
<iframe src="child.html"></iframe>
</body>

child.html 

<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
    var w = $("#container").css("width");
    var h = $("#container").css("height");

    var req = parent.foo(w, h);
    console.log(req); // for debug purposes
});
</script>
<style>
body, html {
    margin: 0;
}
#container {
    width: 500px;
    height: 500px;
    background-color: red;
}
</style>
<div id="container"></div>
</body>
0
задан ksav 15 January 2019 в 16:05
поделиться

1 ответ

Ознакомьтесь с общим шаблоном обновления 

var paths = svg.selectAll('path')
  .data(pathsData)

var pathsEnter = paths.enter()
  .append('path')
  .attr("class", "line") 
  .attr('d', line)

Редактировать

На основе фотографии, которой вы поделились в комментариях

[1121 ]

  • вычисляют уникальный массив всех значений service. (в вашем примере это будет [4, 8], но оно будет управляться данными.)

  • Затем используйте этот массив в качестве данных для группы service lines.

  • Расположите каждую строку в соответствии с вашим yScale.

  • Бонус: создайте цветовую шкалу для динамического определения цвета обводки линии на основе ее значения в массиве значений обслуживания. 

      • const data = [{service: 4, otherData: '...'},{service: 4, otherData: '...'},{service: 8, otherData: '...'},{service: 8, otherData: '...'},{service: 12, otherData: '...'},{service: 12, otherData: '...'}
]

// Get a unique array from data
const serviceData = Array.from(new Set(data.map(a => a.service)));

// create a color scale if you need
const color = d3.scaleLinear().domain(serviceData).interpolate(d3.interpolateHcl).range([d3.rgb("#ff0000"), d3.rgb('#257c00')]);

const width = 500;
const height = 300;
const svg = d3.select('body').append('svg').attr('width', width).attr('height', height)

// Bind to data
const lines = svg.append('g').attr("class", "service-lines-group").selectAll('line')
  .data(serviceData)

// Enter selection - create lines for each data point
const linesEnter = lines.enter()
  .append('line')
  .attr("class", "service-line")
  .attr('x1', 0)
  .attr('x2', width)
  .attr('y1', d => d * 10)
  .attr('y2', d => d * 10)
  .attr('stroke', (d, i) => {
    return color(d)
  })
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

    0
    ответ дан ksav 15 January 2019 в 16:05
    поделиться
    Другие вопросы по тегам:

    Похожие вопросы: