程序员经验分享-hwhale

d3.js 如何从数组中绘制堆叠的水平条？

2023-12-28

我试图让这个堆叠水平条的特殊示例在浏览器中独立工作：http://tributary.io/inlet/4966973 http://tributary.io/inlet/4966973。我知道之前有人问过有关此代码的问题，但从未将其用于工作示例。当我在浏览器中（即在支流站点之外）运行下面的代码时，出现以下错误： '错误：属性translate=“translate(0,NaN)”的值无效'。为什么代码不能在浏览器中运行？是否缺少某些元素？

<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="container">

<section id="display" style="width: 1038px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:xlink="http://www.w3.org/1999/xlink" class="tributary_svg" width="677" height="533"></svg></section>
</div>
<script>
/*modified from Mike Bostock at http://bl.ocks.org/3943967 */

var data = [
{"key":"FL", "pop1":3000, "pop2":4000, "pop3":5000},
{"key":"CA", "pop1":3000, "pop2":3000, "pop3":3000},
{"key":"NY", "pop1":12000, "pop2":5000, "pop3":13000},
{"key":"NC", "pop1":8000, "pop2":21000, "pop3":11000},
{"key":"SC", "pop1":30000, "pop2":12000, "pop3":8000},
{"key":"AZ", "pop1":26614, "pop2":6944, "pop3":30778},
{"key":"TX", "pop1":8000, "pop2":12088, "pop3":20000}
];

var n = 3, // number of layers
m = data.length, // number of samples per layer
stack = d3.layout.stack(),
labels = data.map(function(d) {return d.key;}),

//go through each layer (pop1, pop2 etc, that's the range(n) part)
//then go through each object in data and pull out that objects's population data
//and put it into an array where x is the index and y is the number
layers = stack(d3.range(n).map(function(d) { 
            var a = [];
            for (var i = 0; i < m; ++i) {
                a[i] = {x: i, y: data[i]['pop' + (d+1)]};  
            }
            return a;
         })),

//the largest single layer
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer,      function(d) { return d.y; }); }),
//the largest stack
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });

var margin = {top: 40, right: 10, bottom: 20, left: 50},
width = 677 - margin.left - margin.right,
height = 533 - margin.top - margin.bottom;

var y = d3.scale.ordinal()
.domain(d3.range(m))
.rangeRoundBands([2, height], .08);

var x = d3.scale.linear()
.domain([0, yStackMax])
.range([0, width]);

var color = d3.scale.linear()
.domain([0, n - 1])
.range(["#aad", "#556"]);

var xx = margin.top;

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

var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return color(i); });

 layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("y", function(d) { return y(d.x); })
.attr("x", function(d) { return x(d.y0); })
.attr("height", y.rangeBand())
.attr("width", function(d) { return x(d.y); });

var yAxis = d3.svg.axis()
.scale(y)
.tickSize(1)
.tickPadding(6)
.tickValues(labels)
.orient("left");

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

    </body>

您发现了一个相当有趣的问题，它可能与我们在另一个类似问题中发现的问题有关。看这个答案 https://stackoverflow.com/questions/26029141/looping-through-data-attributes-to-create-4-separate-bar-charts-why-are-there/26030896#26030896.

为了测试这个理论，这里是您的代码副本并粘贴到 Stack Overflow 片段中。第一个使用的是 d3 3.2.8，并且似乎工作正常。

/*modified from Mike Bostock at http://bl.ocks.org/3943967 */

var data = [
{"key":"FL", "pop1":3000, "pop2":4000, "pop3":5000},
{"key":"CA", "pop1":3000, "pop2":3000, "pop3":3000},
{"key":"NY", "pop1":12000, "pop2":5000, "pop3":13000},
{"key":"NC", "pop1":8000, "pop2":21000, "pop3":11000},
{"key":"SC", "pop1":30000, "pop2":12000, "pop3":8000},
{"key":"AZ", "pop1":26614, "pop2":6944, "pop3":30778},
{"key":"TX", "pop1":8000, "pop2":12088, "pop3":20000}
];

var n = 3, // number of layers
m = data.length, // number of samples per layer
stack = d3.layout.stack(),
labels = data.map(function(d) {return d.key;}),

//go through each layer (pop1, pop2 etc, that's the range(n) part)
//then go through each object in data and pull out that objects's population data
//and put it into an array where x is the index and y is the number
layers = stack(d3.range(n).map(function(d) { 
            var a = [];
            for (var i = 0; i < m; ++i) {
                a[i] = {x: i, y: data[i]['pop' + (d+1)]};  
            }
            return a;
         })),

//the largest single layer
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer,      function(d) { return d.y; }); }),
//the largest stack
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });

var margin = {top: 40, right: 10, bottom: 20, left: 50},
width = 677 - margin.left - margin.right,
height = 533 - margin.top - margin.bottom;

var y = d3.scale.ordinal()
.domain(d3.range(m))
.rangeRoundBands([2, height], .08);

var x = d3.scale.linear()
.domain([0, yStackMax])
.range([0, width]);

var color = d3.scale.linear()
.domain([0, n - 1])
.range(["#aad", "#556"]);

var xx = margin.top;

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

var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return color(i); });

 layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("y", function(d) { return y(d.x); })
.attr("x", function(d) { return x(d.y0); })
.attr("height", y.rangeBand())
.attr("width", function(d) { return x(d.y); });

var yAxis = d3.svg.axis()
.scale(y)
.tickSize(1)
.tickPadding(6)
.tickValues(labels)
.orient("left");

svg.append("g")
.attr("class", "y axis")
.call(yAxis);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.8/d3.min.js"></script>
<div id="container">

<section id="display" style="width: 1038px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:xlink="http://www.w3.org/1999/xlink" class="tributary_svg" width="677" height="533"></svg></section>
</div>

又来了，这次使用 d3 3.4.11

/*modified from Mike Bostock at http://bl.ocks.org/3943967 */

var data = [
{"key":"FL", "pop1":3000, "pop2":4000, "pop3":5000},
{"key":"CA", "pop1":3000, "pop2":3000, "pop3":3000},
{"key":"NY", "pop1":12000, "pop2":5000, "pop3":13000},
{"key":"NC", "pop1":8000, "pop2":21000, "pop3":11000},
{"key":"SC", "pop1":30000, "pop2":12000, "pop3":8000},
{"key":"AZ", "pop1":26614, "pop2":6944, "pop3":30778},
{"key":"TX", "pop1":8000, "pop2":12088, "pop3":20000}
];

var n = 3, // number of layers
m = data.length, // number of samples per layer
stack = d3.layout.stack(),
labels = data.map(function(d) {return d.key;}),

//go through each layer (pop1, pop2 etc, that's the range(n) part)
//then go through each object in data and pull out that objects's population data
//and put it into an array where x is the index and y is the number
layers = stack(d3.range(n).map(function(d) { 
            var a = [];
            for (var i = 0; i < m; ++i) {
                a[i] = {x: i, y: data[i]['pop' + (d+1)]};  
            }
            return a;
         })),

//the largest single layer
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer,      function(d) { return d.y; }); }),
//the largest stack
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });

var margin = {top: 40, right: 10, bottom: 20, left: 50},
width = 677 - margin.left - margin.right,
height = 533 - margin.top - margin.bottom;

var y = d3.scale.ordinal()
.domain(d3.range(m))
.rangeRoundBands([2, height], .08);

var x = d3.scale.linear()
.domain([0, yStackMax])
.range([0, width]);

var color = d3.scale.linear()
.domain([0, n - 1])
.range(["#aad", "#556"]);

var xx = margin.top;

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

var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return color(i); });

 layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("y", function(d) { return y(d.x); })
.attr("x", function(d) { return x(d.y0); })
.attr("height", y.rangeBand())
.attr("width", function(d) { return x(d.y); });

var yAxis = d3.svg.axis()
.scale(y)
.tickSize(1)
.tickPadding(6)
.tickValues(labels)
.orient("left");

svg.append("g")
.attr("class", "y axis")
.call(yAxis);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="container">

<section id="display" style="width: 1038px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:xlink="http://www.w3.org/1999/xlink" class="tributary_svg" width="677" height="533"></svg></section>
</div>

两个片段之间的 JavaScript 是相同的，您可以清楚地看到行为不同。因此，简而言之，d3 版本处理 y 轴（特别是附加到轴的域）的方式之间存在差异。

这是 d3 3.4.11 中修复问题的版本

/*modified from Mike Bostock at http://bl.ocks.org/3943967 */

var data = [
{"key":"FL", "pop1":3000, "pop2":4000, "pop3":5000},
{"key":"CA", "pop1":3000, "pop2":3000, "pop3":3000},
{"key":"NY", "pop1":12000, "pop2":5000, "pop3":13000},
{"key":"NC", "pop1":8000, "pop2":21000, "pop3":11000},
{"key":"SC", "pop1":30000, "pop2":12000, "pop3":8000},
{"key":"AZ", "pop1":26614, "pop2":6944, "pop3":30778},
{"key":"TX", "pop1":8000, "pop2":12088, "pop3":20000}
];

var n = 3, // number of layers
m = data.length, // number of samples per layer
stack = d3.layout.stack(),
labels = data.map(function(d) {return d.key;}),

//go through each layer (pop1, pop2 etc, that's the range(n) part)
//then go through each object in data and pull out that objects's population data
//and put it into an array where x is the index and y is the number
layers = stack(d3.range(n).map(function(d) { 
            var a = [];
            for (var i = 0; i < m; ++i) {
                //a[i] = {x: i, y: data[i]['pop' + (d+1)]};  
                a[i] = {x: data[i].key, y: data[i]['pop' + (d+1)]};  
            }
            return a;
         })),

//the largest single layer
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer,      function(d) { return d.y; }); }),
//the largest stack
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });

var margin = {top: 40, right: 10, bottom: 20, left: 50},
width = 677 - margin.left - margin.right,
height = 533 - margin.top - margin.bottom;

var y = d3.scale.ordinal()
//.domain(d3.range(m))
.domain(labels)
.rangeRoundBands([2, height], .08);

var x = d3.scale.linear()
.domain([0, yStackMax])
.range([0, width]);

var color = d3.scale.linear()
.domain([0, n - 1])
.range(["#aad", "#556"]);

var xx = margin.top;

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

var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return color(i); });

 layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("y", function(d) { return y(d.x); })
.attr("x", function(d) { return x(d.y0); })
.attr("height", y.rangeBand())
.attr("width", function(d) { return x(d.y); });

var yAxis = d3.svg.axis()
.scale(y)
.tickSize(1)
.tickPadding(6)
//.tickValues(labels)
.orient("left");

svg.append("g")
.attr("class", "y axis")
.call(yAxis);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="container">

<section id="display" style="width: 1038px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:xlink="http://www.w3.org/1999/xlink" class="tributary_svg" width="677" height="533"></svg></section>
</div>

该版本有以下三点不同：

  1. 更新方式x堆栈中的值被引用

    layers = stack(d3.range(n).map(function(d) { 
    var a = [];
        for (var i = 0; i < m; ++i) {
            //a[i] = {x: i, y: data[i]['pop' + (d+1)]};  
            a[i] = {x: data[i].key, y: data[i]['pop' + (d+1)]};  
        }
        return a;
 })),

  2. 更改域y scale

    var y = d3.scale.ordinal()
                //.domain(d3.range(m))
               .domain(labels)
               .rangeRoundBands([2, height], .08);

  3. 去除.tickValues从 y 轴调用。它将使用domain相反的规模。

    var yAxis = d3.svg.axis()
                  .scale(y)
                  .tickSize(1)
                  .tickPadding(6)
                  //.tickValues(labels)
                  .orient("left");

可以看到这个新版本在d3 3.4.11中可以正常运行。

这是使用 d3 3.2.8 的修复版本：

/*modified from Mike Bostock at http://bl.ocks.org/3943967 */

var data = [
{"key":"FL", "pop1":3000, "pop2":4000, "pop3":5000},
{"key":"CA", "pop1":3000, "pop2":3000, "pop3":3000},
{"key":"NY", "pop1":12000, "pop2":5000, "pop3":13000},
{"key":"NC", "pop1":8000, "pop2":21000, "pop3":11000},
{"key":"SC", "pop1":30000, "pop2":12000, "pop3":8000},
{"key":"AZ", "pop1":26614, "pop2":6944, "pop3":30778},
{"key":"TX", "pop1":8000, "pop2":12088, "pop3":20000}
];

var n = 3, // number of layers
m = data.length, // number of samples per layer
stack = d3.layout.stack(),
labels = data.map(function(d) {return d.key;}),

//go through each layer (pop1, pop2 etc, that's the range(n) part)
//then go through each object in data and pull out that objects's population data
//and put it into an array where x is the index and y is the number
layers = stack(d3.range(n).map(function(d) { 
            var a = [];
            for (var i = 0; i < m; ++i) {
                //a[i] = {x: i, y: data[i]['pop' + (d+1)]};  
                a[i] = {x: data[i].key, y: data[i]['pop' + (d+1)]};  
            }
            return a;
         })),

//the largest single layer
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer,      function(d) { return d.y; }); }),
//the largest stack
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });

var margin = {top: 40, right: 10, bottom: 20, left: 50},
width = 677 - margin.left - margin.right,
height = 533 - margin.top - margin.bottom;

var y = d3.scale.ordinal()
//.domain(d3.range(m))
.domain(labels)
.rangeRoundBands([2, height], .08);

var x = d3.scale.linear()
.domain([0, yStackMax])
.range([0, width]);

var color = d3.scale.linear()
.domain([0, n - 1])
.range(["#aad", "#556"]);

var xx = margin.top;

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

var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return color(i); });

 layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("y", function(d) { return y(d.x); })
.attr("x", function(d) { return x(d.y0); })
.attr("height", y.rangeBand())
.attr("width", function(d) { return x(d.y); });

var yAxis = d3.svg.axis()
.scale(y)
.tickSize(1)
.tickPadding(6)
//.tickValues(labels)
.orient("left");

svg.append("g")
.attr("class", "y axis")
.call(yAxis);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.8/d3.min.js"></script>
<div id="container">

<section id="display" style="width: 1038px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:xlink="http://www.w3.org/1999/xlink" class="tributary_svg" width="677" height="533"></svg></section>
</div>

它似乎在 d3 3.2.8 中也可以正常工作，因此它应该可以解决您的问题。

诊断起来很有趣，我唯一能想到的是 tributary.io 基于旧版本的 d3，其中轴/域交互工作正常（尽管已损坏），而在您的独立版本中，您是引用最新版本，该版本已解决了问题所在（导致可视化损坏，因为您的代码依赖于它）。

注意：弄清楚这个问题很有趣，但在我的回答中没有附加评论26029141 https://stackoverflow.com/questions/26029141/looping-through-data-attributes-to-create-4-separate-bar-charts-why-are-there/26030896#26030896诊断几乎是不可能的。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

d3js

d3.js 如何从数组中绘制堆叠的水平条？ 的相关文章

随机推荐

  • Eclipse 在调试 ctrl+shift+i 时丢失了检查快捷方式

    我正在尝试恢复快捷方式 但没有成功 有一个执行检查的快捷方式 只需单击 CTRL SHIFT I 但现在我已经没有这个功能了 它似乎消失了 有想法恢复它吗 谢谢 最后我想出了如何恢复这个命令 要到达此面板 您必须转到 Windows gt

  • 比较剪贴板中的 IDataObject

    我的 WPF 应用程序检查剪贴板上的数据 看看它是否可以使用该数据 因为我根据数据设置了一些按钮来启用 禁用 通过ICommand实现 这段代码被频繁调用 确定我的应用程序是否可以处理数据的工作有时可能非常重要 因此会导致我的应用程序随机

  • 在用户输入的数组中查找值

    我试图在用户之前输入过的数组中找到任何用户输入的值 我做了以下操作来查找数组中输入的值 但似乎不知道在哪里插入循环来查找用户输入的搜索值 好的 更新 我正在寻找一种方法来查找用户之前输入的数组中输入的值 如果符合逻辑的话是这样的 好的第二次

  • 面板上的 DrawToBitmap 为空白

    因此 我编写了一个类 它存储一些测试结果信息 然后是一个向用户显示该信息的控件 我想在此类上放置一个打印函数 以全页大小绘制控件并打印它 然而它总是显示空白 该代码将面板视为控件 因为它可能是其他类型的值 我想我一定缺少一些简单的东西 vo

  • 使用 Google Admin SDK 的服务帐户创建用户？

    文档对此有点不清楚 我真的可以这样做吗 到目前为止 我看到的唯一示例来自 Google 文档 该文档显示它使用 GoogleAuthorizationCodeFlow 类来获取授权 我见过一些使用服务帐户更新和检索用户列表的示例 但没有看到

  • 如何设计 Django 的文件选择器表单按钮的样式？

    我正在尝试设计我的 Django文件上传按钮 但由于它是通过表单处理的 并且没有在模板内的 HTML 中显式编写 所以我无法像其他输入类型按钮那样直接使用 HTML 和 CSS 对其进行样式设置 我尝试在我的 CSS 类中添加forms p

  • 将项目动态添加到使用 AJAX 的 jQuery Select2 控件

    我有一个使用 AJAX 进行填充的 jQuery Select2 控件

  • 如何在 Nuxt 中将“text/javascript”添加到

    我有以下脚本 我必须添加到标签 但在 Nuxt 中 我必须将其作为对象添加到 nuxt config js 中 我该怎么做呢

  • R以科学记数法显示数字[重复]

    这个问题在这里已经有答案了 函数的结果以科学计数法显示 我想将其改回正常 但仅限于该函数 我不想更改全局设置 有人可以帮忙吗 你可以做 format functionResult scientific FALSE or as integer

  • HTML5 离线模式和地理定位

    当您在 HTML5 中处于离线模式时 是否仍然可以使用地理定位功能 看来当我在线时 navigator onLine true 地理位置工作正常 但是当我离线时 navigator onLine false 我会被抛出错误回调 并且错误表明

  • 如何在运行 python 脚本时清除 cmd/terminal

    我一直在寻找在运行脚本时清除 shell 的方法 但是有没有办法在 CMD 中运行脚本时清除屏幕 我当前的方法是这样的 clear py import title def clear print n 25 title title game

  • 在 R jupyter 笔记本中使用 ipython 魔法？

    我安装了 jupyterconda install jupyter并正在运行一个安装了 r 内核的笔记本conda create n my r env c r r essentials 我正在运行笔记本并希望从 shell 运行 bash

  • 使用 .NET SDK 在 DynamoDB 中保留动态对象

    我尝试使用 NET SDK 将以下类保留到 DynamoDB public class MyClass public string Id get set public string Name get set public object Se

  • 如何从 PHP 脚本中禁用 Varnish 缓存？

    我分发了一个 PHP 脚本 最近很多人在共享主机帐户上的清漆缓存方面遇到了问题 这是 PHP 脚本顶部的代码 但是 我仍然在响应标头中收到 Varnish HIT 并且脚本无法正常工作 header Pragma no cache head

  • 构建一个 3d 模型查看器 android？ [复制]

    这个问题在这里已经有答案了 我正在尝试在 opengl 中构建模型查看器 但被难住了 我基本上只想构建自己的应用程序 可以加载 off 或 obj 格式的自定义模型并将其显示在我的平板电脑上 看一下开源代码的示例 And 的 OBJload

  • 用于检测大写单词的 Stringr 模式

    我正在尝试编写一个函数来检测全部大写的大写单词 目前 代码 df lt data frame title character id numeric gt add row title THIS is an EXAMPLE where I DO

  • 使用 htaccess 从基本 URL 中删除变量

    我一直在尝试重写一个网址 例如 www somesite com x 372 进入一个网址 www somesite com 我当前的代码似乎不起作用 重写引擎开启 RewriteCond QUERY STRING x 重写规则http w

  • 为什么我必须求和才能找到重复的数字？

    问题 给你一个从 1 到 n 1 的数字序列 其中一个数字仅重复一次 例如 1 2 3 3 4 5 如何找到重复的数字 通常 这个问题的所谓 聪明 答案就是将其总结并找出与预期总和的差异 但为什么不直接浏览列表并检查前面的数字呢 两者都是

  • Cucumber 在 JUnit5 中找不到任何功能

    我正在尝试在我的项目中设置 Cucumber 我遵循以前项目中的相同配置 但运行测试时仍然存在问题 现在我开始怀疑问题可能是这个项目使用的是 JUnit 5 而不是 4 我也将 junit4 添加到构建选项中 以便能够使用 jUnit4 执

  • d3.js 如何从数组中绘制堆叠的水平条？

    我试图让这个堆叠水平条的特殊示例在浏览器中独立工作 http tributary io inlet 4966973 http tributary io inlet 4966973 我知道之前有人问过有关此代码的问题 但从未将其用于工作示例

热门标签