- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这可能是一个简单的错误,因为我是 D3 的 super 新手,但我正在尝试创建一个简单的条形图,其中的条形高度按比例缩放。它适用于硬编码高度但返回错误“错误:属性高度:预期长度,“NaN”。”当我尝试使用线性刻度时。我已经 console.logged 了 d.grossbillions 的类型,它是一个数字和我预期的数字,所以不确定为什么我得到 NaN。非常感谢任何帮助。
HTML:
<h1>Top Grossing Films of 2017</h1>
<div class="chart"></div>
CSS:
<style type="text/css">
svg {
border:1px solid black;
background-color: #e2ffff;
}
svg:nth-child(2){
border:2px solid pink;
fill: #00ff00;
}
text{
fill: #fff;
font-family: sans-serif;
font-size: 1.1rem;
}
h1 {
font-family: sans-serif;
}
body{
text-align: center;
}
</style>
Javascript:
<script type="text/javascript">
var gross = [
{name: 'The Last Jedi', grossBillions:1.7},
{name:'Fast and Furious 8', grossBillions:1.3},
{name:'Transformers: The Last Knight', grossBillions:1.2},
{name:'Despicable Me 3', grossBillions:1},
{name:'Beauty and The Beast', grossBillions:0.95},
{name:'Spider-Man Homecoming', grossBillions:0.9}
];
var yScale = d3.scaleLinear()
.domain([0, d3.max(gross)])
.range([0, 700]);
var chart = d3.select('.chart')
.append('svg')
.attr('width', gross.length*100)
.attr('height', 700);
var bars = chart.selectAll('rect').data(gross);
bars.enter()
.append('rect')
.attr('width', 50)
.attr('height', function(d){return yScale(d.grossBillions) })
.attr('class', 'bar')
.attr('x', function(d,i) { return (i * 100)+20 })
.attr('y', function(d){return 700 - d.grossBillions*400});
chart.selectAll( 'rect:nth-child(odd)' ).attr( 'fill' , '#494949' );
chart.selectAll( 'rect:nth-child(even)' ).attr( 'fill' , '#6b6b6b' );
var labels = chart.selectAll('text').data(gross);
labels.enter()
.append('text')
.text(function(d){return d.name + ' {$' + d.grossBillions + ' billion}'})
.attr('y', 700)
.attr('x', function(d,i) { return i * 100 });
chart.select('text:nth-child(7)').attr('transform', 'rotate(-90 10,660)');
chart.select('text:nth-child(8)').attr('transform', 'rotate(-90 110,660)');
chart.select('text:nth-child(9)').attr('transform', 'rotate(-90 210,660)');
chart.select('text:nth-child(10)').attr('transform', 'rotate(-90 310,660)');
chart.select('text:nth-child(11)').attr('transform', 'rotate(-90 410,660)');
chart.select('text:nth-child(12)').attr('transform', 'rotate(-90 510,660)');
最佳答案
您的 yScale
域的计算不正确,它应该是这样的:
var yScale = d3.scaleLinear()
.domain([0, d3.max(gross, function(d){return d.grossBillions;}])
.range([0, 700]);
这样,返回值将被正确计算。
关于javascript - D3属性高度 : Expected length, "NaN",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48390208/
我找到了以下代码片段: length = length and length or len(string) 在我看来,这应该等同于: length = length or len(string) 我能
当我使用 numpy.shape() 检查数组的形状时,我有时会得到 (length,1) 有时会得到 (length,)。看起来区别在于列向量与行向量......但它似乎并没有改变数组本身的任何内容
我正在学习 Java,有一个简单的问题。 在设置类的示例中,我看到了这一点: length >= 0 ? length : length * -1 这是什么意思? 谢谢。 最佳答案 这是一种骇人听闻的
我在阅读有关在 Ruby 中重新定义方法有多么容易的文章时遇到了以下问题: class Array alias :old_length :length def length old_l
例如在下面的代码中a和b和c是相等的。 EditText editText; editText = (EditText) findViewById(R.id.edttxt); editText.set
在昨天教授我的 JavaScript 类(class)时,我和我的学生遇到了一些有趣的功能,我认为这些功能可能值得在一个问题和我得出的答案中捕捉到。 在 Chrome 的 JS 控制台中输入 Arra
这个问题在这里已经有了答案: How can I get the size of an array, a Collection, or a String in Java? (3 个回答) 3年前关闭。
这个问题在这里已经有了答案: length and length() in Java (8 个答案) 关闭 6 年前。 我注意到在计算数组的长度时,你会这样写: arrayone.length; 但
console.log(this.slides.length()); 打印 Cannot read property 'length' of undefined.在 setTimeout 为 100
在搜索stackoverflow问题时,我发现了此链接: Error in file.download when downloading custom file。 但是,我的情况有些不同(我认为):
这个问题已经有答案了: Why does R use partial matching? (1 个回答) 已关闭 8 年前。 大家。我刚刚开始使用 swirl 学习 R 编程。 我刚刚了解到seq 。
这个问题已经有答案了: Why does R use partial matching? (1 个回答) 已关闭 8 年前。 大家。我刚刚开始使用 swirl 学习 R 编程。 我刚刚了解到seq 。
这个问题已经有答案了: How can I get the size of an array, a Collection, or a String in Java? (3 个回答) 已关闭 9 年前。
我有一个大数组,其中包含所有类型( bool 值,数组,null,...),并且我正在尝试访问它们的属性arr[i].length,但有些其中显然没有长度。 我不介意那些缺少长度的人是否返回未定义(我
我在对象的属性中有一些文本。我正在测试对象的属性中是否有要显示的文本;如果没有,那么我显示“-”而不是空白。看起来没有什么区别: if (MyObject.SomeText && MyObject.S
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Why is String.length() a method? Java - Array's length
这个问题在这里已经有了答案: obj.length === +obj.length in javascript (4 个答案) 关闭 9 年前。 我一直在读underscore.js源代码并在 _.
#include using std::cout; using std::cin; using std::string; int main(){ cout > name; cout
我正在细读 underscore.js annotated source当我遇到这个时: if (obj.length === +obj.length) {...} 我现在从this stackove
我正在查看 dotnet 运行时中的一些代码,我注意到不是这样写的: if (args.Length > 0) 他们使用这个: if (args is { Length: > 0}) 你知道用第二种方
我是一名优秀的程序员,十分优秀!