4.0 KiB
4.0 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fac367417b2b2512bdd | Use Dynamic Scales |
|
6 | 使用动态比例 |
Description
min()
和max()
方法可用于帮助设置比例。给定复杂的数据集,一个优先级是设置比例,以便可视化符合SVG容器的宽度和高度。您希望在SVG画布内绘制所有数据,以便在网页上显示。下面的示例设置散点图数据的x轴刻度。 domain()
方法将信息传递给关于绘图的原始数据值的比例。 range()
方法为其提供有关可视化的网页上的实际空间的信息。在该示例中,域从0变为集合中的最大值。它使用max()
方法和基于数组中x值的回调函数。该范围使用SVG画布的宽度( w
),但它也包含一些填充。这会在散点图点和SVG画布边缘之间留出空间。 const dataset = [填充可能首先令人困惑。将x轴描绘为0到500的水平线(SVG画布的宽度值)。在
[34,78],
[109,280],
[310,120],
[79,411],
[420,220],
[233,145],
[333,96],
[222,333],
[78,320],
[21,123]
]。
const w = 500;
const h = 500;
//在SVG画布边界和绘图之间填充
const padding = 30;
const xScale = d3.scaleLinear()
.domain([0,d3.max(dataset,(d)=> d [0])])
.range([padding,w - padding]);
range()
方法中包含填充会强制绘图沿着该行(而不是0)从30开始,并以470(而不是500)结束。 Instructions
yScale
变量创建线性y轴刻度。域应该从零开始并转到集合中的最大y值。范围应使用SVG高度( h
)并包括填充。 注意 记得保持情节正面朝上。设置y坐标的范围时,较高的值(高度减去填充)是第一个参数,较低的值是第二个参数。
Tests
tests:
- text: <code>h2</code>的文本应为30。
testString: 'assert(output == 30 && $("h2").text() == "30", "The text in the <code>h2</code> should be 30.");'
- text: 'yScale的<code>domain()</code>应该等于<code>[0, 411]</code> 0,411 <code>[0, 411]</code> 。'
testString: 'assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]), "The <code>domain()</code> of yScale should be equivalent to <code>[0, 411]</code>.");'
- text: 'yScale的<code>range()</code>应相当于<code>[470, 30]</code> 470,30 <code>[470, 30]</code> 。'
testString: 'assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]), "The <code>range()</code> of yScale should be equivalent to <code>[470, 30]</code>.");'
Challenge Seed
<body>
<script>
const dataset = [
[ 34, 78 ],
[ 109, 280 ],
[ 310, 120 ],
[ 79, 411 ],
[ 420, 220 ],
[ 233, 145 ],
[ 333, 96 ],
[ 222, 333 ],
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
// Padding between the SVG canvas boundary and the plot
const padding = 30;
// Create an x and y scale
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[0])])
.range([padding, w - padding]);
// Add your code below this line
const yScale = undefined;
// Add your code above this line
const output = yScale(411); // Returns 30
d3.select("body")
.append("h2")
.text(output)
</script>
</body>
Solution
// solution required