javascript - 在 D3 中 append 堆叠条形图和另一个条形图-6ren

javascript - 在 D3 中 append 堆叠条形图和另一个条形图

转载作者：行者123 更新时间：2023-11-30 16:07:32

25

4

我想 append 堆叠条形图以及另一个具有不同尺寸的条形图，以便所有三个都可见，但 append 的条形图即使与不同尺寸一起使用也不可见。工作 fiddle

CODE.HTML

     <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>Simple STACKBAR</title>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <style type="text/css">
        svg {
          font: 10px sans-serif;
          shape-rendering: crispEdges;
        }

        .axis path,
        .axis line {
          fill: none;
          stroke: #000;
        }

        path.domain {
          stroke: none;
        }

        .y .tick line {
          stroke: #ddd;
        }

         .bar1 {
          fill: steelblue;
          opacity: 0.5;
        }

         .bar1:hover {
          fill: brown;
        }

        </style>

      </head>
      <body>
      <script type="text/javascript">

      // Setup svg using Bostock's margin convention

      var margin = {top: 20, right: 160, bottom: 35, left: 30};

      var width = 960 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;

      var svg = d3.select("body")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


      /* Data in strings like it would be if imported from a csv */

      var data = [
        { year: "Technical/Analytical", redDelicious: "10", mcintosh: "15", oranges: "19" },
        { year: "Problem Solving", redDelicious: "12", mcintosh: "18", oranges: "19" },
        { year: "Communication", redDelicious: "05", mcintosh: "20", oranges: "28" },
        { year: "Specialization", redDelicious: "08", mcintosh: "15", oranges: "16" },

      ];

      //var parse = d3.time.format("%Y").parse;


      // Transpose the data into layers
      var dataset = d3.layout.stack()(["redDelicious", "mcintosh"].map(function(skillset) {
        return data.map(function(d) {
          return {x: d.year, y: +d[skillset]};
        });
      }));


      // Set x, y and colors
      var x = d3.scale.ordinal()
        .domain(dataset[0].map(function(d) { return d.x; }))
        .rangeRoundBands([10, width-10], 0.02);

      var y = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d) {  return d3.max(d, function(d) { return d.y0 + d.y; });  })])
        .range([height, 0]);

      var colors = ["#b33040", "#d9d574"];


      // Define and draw axes
      var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(5)
        .tickSize(-width, 0, 0)
        .tickFormat( function(d) { return d } );

      var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
      //  .tickFormat(d3.time.format("%Y"));

      svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);



      // Create groups for each series, rects for each segment 
      var groups = svg.selectAll("g.cost")
        .data(dataset)
        .enter().append("g")
        .attr("class", "cost")
        .style("fill", function(d, i) { return colors[i]; });

      var rect = groups.selectAll("rect")
        .data(function(d) { return d; })
        .enter()
        .append("rect")
        .attr("x", function(d) { return x(d.x); })
        .attr("y", function(d) { return y(d.y0 + d.y); })
        .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
        .attr("width", x.rangeBand());

           groups.append("rect")
              .attr("class", "bar1")
              .attr("x", function(d) {
                return x(d.year) + 20; // center it
              })
              .attr("width", x.rangeBand() - 40) // make it slimmer
              .attr("y", function(d) {
                return y(d.oranges);
              })
              .attr("height", function(d) {
                return height - y(d.oranges);
              });

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

最佳答案

第一步

使用map制作橙色条的数据集，如下图所示:

var orangeData = data.map(function(d) {
        return {
          year: d.year,
          oranges: +d.oranges
        }
      });

第二步

使堆叠条形图更细，并将其放在 x 刻度的一侧。

 var rect = groups.selectAll("rect")
        .data(function(d) {
          return d;
        })
        .enter()
        .append("rect")
        .attr("x", function(d) {
          return x(d.x) + x.rangeBand() / 4;//places stack left of the x tick
        })
        .attr("y", function(d) {
          return y(d.y0 + d.y);
        })
        .attr("height", function(d) {
          return y(d.y0) - y(d.y0 + d.y);
        })
        .attr("width", x.rangeBand() / 4);//make the stack bar thin by 4 times.

第 3 步

制作条形图。

svg.selectAll(".bar1").data(orangeData).enter().append("g")
        .attr("class", "bar1").append("rect")
        .attr("x", function(d) {
          return x(d.year) + x.rangeBand() / 2; // place it right if the x tick
        })
        .attr("width", x.rangeBand()/4) // make it as slim as stacked bar chart
        .attr("y", function(d) {
          return y(d.oranges);
        })
        .attr("height", function(d) {
          return height - y(d.oranges);
        });

工作代码here

关于javascript - 在 D3 中 append 堆叠条形图和另一个条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36807902/

25

4

0

文章推荐： c# - 如何在visual studio中添加资源文件

文章推荐： javascript - 在 JavaScript 中动态添加文本

文章推荐： c# - 如何使用反射设置固定缓冲区字段元素？

文章推荐： javascript - ionic 警报 - 检查结果是否未定义

ios - UICollectionView 堆叠
如何将单元格(在 UICollectionView 中)堆叠在一起？ Feedly 做得很好，我想知道是否可以以某种方式操纵 zIndex 属性以在 UICollectionView 的导航中获得类似
css 堆叠 div
我正在尝试堆叠 div 以使用和图像显示顶部和底部淡入淡出。外部 div(“旋转器”)有一个背景图像，该图像在顶部和底部具有渐变，在中间是透明的。在中间，我想显示内容或图像，并将外部 div 背景图
CSS 堆叠 Div
我有两个动画(在 CSS 中)div，它们围绕彼此旋转。我想在中间为文本添加另一个 div。但是，如果我将 div 放在这两个中的任何一个中，它就会与父 div 一起设置动画。如果我尝试定位它，它就位
Android 堆叠 View
图中显示了我想要的 View 。最佳答案为此你可以采取 FrameLayout . 例如 - 1: 更新: 例如 - 2:精湛的示例和技巧，可在此处找到:http://w
tensorflow - 堆叠 LSTM 的初始状态结构
使用 tf.keras.layers.RNN 的 TensorFlow (1.13.1) 中多层/堆叠 RNN 的初始状态所需的结构是什么？ API？我尝试了以下方法: lstm_cell_size
r - ggplot2 - 堆叠/躲避条形图
我在制作条形图时遇到问题，其中 y 轴不是计数，而是变量的值。我使用stat=identity，这对于一个变量来说很好。但是，如果我有两个变量并且想要创建堆叠/闪避条形图怎么办？我这里有一些模拟数
r - 对路径列表中的栅格进行分组/堆叠，并提取每组的最小值
我有一个栅格路径列表(rplist = 912 raster pathe for 912 rasters (19yeras)(12months)(4weeks))如下: [1] "C:/Users
php - 堆叠 PHP 代码？
我已经完成了一个项目，现在需要更改该项目，以便在变量位于数组中时显示一个 div，如果变量不在数组中则显示另一个 div。通常我会这么做祝你愉快，但是我得到的代码已经包含大量 html 和 ph
r - ggplot2 - 堆叠/躲避条形图
我在制作条形图时遇到问题，其中 y 轴不是计数，而是来自变量的值。我使用 stat=identity，这对一个变量来说没问题。但是，如果我有两个变量并想创建一个堆叠/闪避条形图怎么办？我这里有一些
r - 对路径列表中的栅格进行分组/堆叠，并提取每组的最小值
我有一个栅格路径列表(rplist = 912 raster pathe for 912 rasters (19yeras)(12months)(4weeks))如下: [1] "C:/Users
java - 标签重叠(堆叠)有问题
我正在尝试将分数和耗时标签(scoreAndTimer)添加到我已经工作的贪吃蛇游戏代码中。问题是当我使用 ScoreAndTimer.setText(); 时它与之前的文本堆叠在一起。我尝试 se
gtk - 堆叠 GTK+ 小部件
有没有办法将 GTK+ 小部件放入堆栈中？ IE。在标签上放置一个按钮，使按钮覆盖标签的一部分。最佳答案您可以使用 GtkFixed 作为布局。这将允许您控制子小部件的确切位置，并且它们可以重叠。
java - 堆叠 ASM 访问者的正确方法是什么？
我有以下代码: for (Map.Entry e : classes.entrySet()) { ClassReader reader = e.getValue(); ClassWri
r - 根据ggplot2中类别的比例调整(堆叠)条宽
我正在尝试根据类别的计数(或比例)更改我的(堆叠)条宽，作为示例，我使用了钻石数据集。我想根据每个类别(变量 cut )的频率看到不同的宽度。我首先创建了一个变量 cut_prop然后用下面的代码绘制
c# - DispatcherTimer 堆叠 - UWP
我目前正在 UWP 中开展一个项目，我有一个 CommandBar，我想将其从 Hidden 变为 Compact 如果鼠标移动。五秒钟后(如果鼠标不移动)CommandBar 应该再次返回到Hidd
ios - 动画期间 subview 堆叠
我是 Swift 新手，并尝试在学习过程中编写一本交互式书籍。我使用 CATransform3DMakeRotation 创建了封面效果。正如您所看到的，当我堆叠 View 时，问题就出现了。如果我
android - 使用相机快照防止多项 Activity 堆叠
我已经阅读了 finish(); 命令和 FLAG_ACTIVITY_CLEAR_TOP 命令，还查看了 Common Ware 关于终止应用程序的回答，但我不确定如何放置这进入我的应用程序。基本上
c++ - 堆叠 Cg 着色器
在我的引擎中，我从成对的顶点/像素着色器文件中加载 Cg 着色器。我希望能够堆叠着色器以组合它们(照明+ Material 等)。除了将着色器分解为单独的函数然后从中创建单个着色器脚本字符串之外，您是
java - 相同的 Activity 堆叠
我有一个 Activity 应该自行完成并关闭应用程序。现在，在某些情况下，根据用户导航到 Activity 的方式而变化， Activity 正在堆叠。当 Activity 堆积时，然后调用 fin
python - 堆叠 CSV 文件的最快方法
我有 10 个具有完全相同的列和数据类型的 csv 文件。什么是最快/最有效的堆叠方式？ CSV1: col1 | col2 | col3 1 | 'a' | 0.1 2 | 'b'

首页

博学

6Ren·AI

商城

javascript - 在 D3 中 append 堆叠条形图和另一个条形图