个人中心
gpt4 book ai didi

jquery - 在 d3 中重叠

转载 作者：太空宇宙 更新时间：2023-11-03 18:08:29 24 4
gpt4 key购买 nike

我使用 d3 创建了一个甘特图。我的图表根据数据包含不同大小的矩形。图中也有重叠的矩形。我想添加一个功能，以便当矩形重叠时，高度较小的矩形应该位于高度较大的矩形的顶部。我不知道该怎么做。如果有人能帮助我，那就太好了。

这是一个 fiddle :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) 最简单的解决方案(不是您要求的)是使矩形半透明；那么底层的矩形就会显示出来。在css中，添加以下内容

rect { opacity: .5;}

2) 从根本上说，DOM 中矩形的顺序决定了哪些矩形位于顶部。后面的 rects 显示在前面的 rects 之上。因此，要将小矩形放在顶部，您需要对数据进行排序，以便在系列末尾具有较短的矩形。在您的脚本中，在声明数据集后立即添加以下内容。

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

Here's将两个选项放在一起的 fiddle 。

关于jquery - 在 d3 中重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24249432/

24 4 0
文章推荐： ruby - 使用正则表达式检测版本号的特定格式
文章推荐： python - 如何为现有 GitHub 存储库创建 Xcode 项目
文章推荐： ruby - 如何在共享上下文之间共享 RSpec let 变量？
文章推荐： ruby-on-rails - rails 4 : Why does this code not save Contact and Company to database?
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com