Блог

Главная - Вопросы по программированию - Перекрытие в d3

Перекрытие в d3

#jquery #css #d3.js

#jquery #css #d3.js

Вопрос:

Я создал диаграмму Ганта, используя d3. Моя диаграмма содержит прямоугольники разных размеров в зависимости от данных. На графике также есть перекрывающиеся прямоугольники. Я хочу добавить функциональность, чтобы, когда прямоугольники перекрывались, прямоугольники с меньшей высотой должны быть поверх прямоугольников с большей высотой. Я не уверен, как это сделать. Было бы здорово, если бы кто-нибудь мог мне помочь.

Вот скрипка: http://jsfiddle.net/sqY5b /

 <!DOCTYPE html>
<html lang="en">
<head>

   <title></title>
   <meta charset="utf-8">
   <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
   <style type="text/css">
    .axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }

    .axis text {
        font-family: sans-serif;
        font-size: 11px;
    }
   </style>
</head>
<body>
   <script type="text/javascript">

    var w = 500;
    var h = 300;
    var padding = 30;
    var rectH = 50;
    var rectW = 100;
    var dataset = [
                    [5, 20, 20, 10, "red"], [480, 90, 20, 10, "red"], [475, 90, 30, 10, "green"], [100, 33, 20, 10, "red"], [330, 95, 20, 10, "red"],
                    [410, 12, 20, 10, "red"], [475, 44, 20, 10, "red"], [25, 67, 20, 10, "red"], [80, 21, 10, 20, "red"], [85, 21, 20, 10, "blue"],
                    [600, 150, 20, 10, "red"]
    ];

    var xScale = d3.scale.linear()
                         .domain([0, d3.max(dataset, function (d) { return d[0]; })])
                         .range([padding, w - padding * 2]);

    var yScale = d3.scale.linear()
                         .domain([0, d3.max(dataset, function (d) { return d[1]; })])
                         .range([h - padding, padding]);

    var rScale = d3.scale.linear()
                         .domain([0, d3.max(dataset, function (d) { return d[1]; })])
                         .range([2, 5]);

    var xAxis = d3.svg.axis()
                      .scale(xScale)
                      .orient("bottom")
                      .ticks(5);

    var yAxis = d3.svg.axis()
                      .scale(yScale)
                      .orient("left")
                      .ticks(5);

    var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    var g = svg.append("g");

    g.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", function (d) {
           return xScale(d[0]);
       })
       .attr("y", function (d) {
           return yScale(d[1]);
       })
    .attr("height", function (d) { return d[2]; })
    .attr("width", function (d) { return d[3]; })
    .attr("fill", function (d) { return d[4]; });

    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0,"   (h - padding)   ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate("   padding   ",0)")
        .call(yAxis);

   </script>
</body>
</html>

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

Спасибо

Комментарии:

1. Проблемы D3 практически невозможно решить без хотя бы некоторого кода и, возможно, даже скрипки. Вам нужно будет опубликовать немного больше информации, чтобы получить хорошую помощь

2. Привет, @JimMeam, теперь я предоставил скрипку. Спасибо

3. Можете ли вы включить код в вопрос в дополнение к скрипке?

4. @AnubianNoob Я включил код.

Ответ №1:

Я могу придумать два решения:

1) Самое простое решение (не то, о чем вы просили) — сделать прямоугольники полупрозрачными; тогда будут видны нижележащие прямоугольники. В css добавьте следующее

 rect { opacity: .5;}

2) По сути, порядок прямоугольников в DOM определяет, какие прямоугольники находятся сверху. Более поздние прямоугольники отображаются поверх более ранних прямоугольников. Итак, чтобы иметь маленькие прямоугольники сверху, вам нужно отсортировать данные, чтобы иметь более короткие прямоугольники в конце ряда. В вашем скрипте добавьте следующее сразу после объявления набора данных.

 dataset.sort( function( a, b) { return b[2]-a[2]})

Вот скрипка с обоими вариантами вместе.