个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我对编程和编码非常陌生。我正在使用 Adobe Illustrator 生成的 .svg 文件通过 d3.js 制作交互式 map 。
这个 SVG 由 g 组织而成，其中多边形内部有自己的 id。我还添加了 SVG 中每个多边形的自定义数据 (data-price="number"):
<g id="price-range">
<polygon id="name" data-price="price number" points="..."/>
<polygon id="name2" data-price="price2 number" points="..."/>
// and so on
</g>
我想使用这些自定义数据属性作为数据来为每个多边形生成不同样式的输出。这是我到目前为止的代码(它不起作用):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3/d3.js"></script>
<style type="text/css">
#map-block {
width: 100%;
max-width: 1000px;
align-content: center;
margin: auto; }
</style>
</head>
<body>
<div id="map-block">
<svg id="mapa-usados-sp" width="100%"></svg>
</div>
<script>
var svg = null;
var mapa = null;
d3.xml("sp.svg", function(error, xml) {
if (error) throw error;
var domSVG = document.getElementById('mapa-usados-sp');
domSVG.appendChild(xml.documentElement.getElementById('mapa'));
svg = d3.select(domSVG);
mapa = svg.select('#mapa');
var xmlSVG = d3.select(xml.getElementsByTagName('svg')[0]);
svg.attr('viewBox', xmlSVG.attr('viewBox'));
var bg = mapa.selectAll("g#contexto");
bg.style("fill", "#e9e9e9");
var shapes = mapa.select("g#zones").selectAll("polygon");
var price = shapes.(xml.documentElement.getAttribute('data-
price'));
shapes.style("fill", function(price) {
if (price = 0) { return "#323232";}
if (price <= 1700 && price > 0 ) {return "#2169dd";}
if (price > 1700 && d <= 2500) {return "#6921dd";}
});
});
</script>
</body>
</html>
我选择不引用每个形状的 id 或类来设置其样式，因为我真的很想使用 .svg 文件中的自定义数据属性来生成视觉输出。
最终这将是一个非常有活力的作品。我将添加交互和事件监听器，因此这就是为什么我非常有兴趣了解如何从 .svg 属性中提取数据并使用它来设置包含这些属性的形状的样式。
我希望我正确地表达了我的观点。
最佳答案
获取每个多边形的“数据”属性的方法是使用 dataset :
The HTMLElement.dataset property allows access, both in reading and writing mode, to all the custom data attributes (data-*) set on the element, either in HTML or in the DOM.
在您的情况下，其中 this 是当前 DOM 元素:
this.dataset.price
请注意，这将返回一个字符串，您可能想将其强制为数字。
这是演示，使用 data-price 的值来填充多边形:
var svg = d3.select("svg");
var shapes = svg.selectAll("polygon");
shapes.each(function() {
var thisPrice = +this.dataset.price;
d3.select(this).attr("fill", thisPrice === 0 ? "#323232" :
thisPrice > 1700 ? "#6921dd" : "#2169dd")
})<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
<polygon id="name1" data-price="0" points="30,10 10,50 50,50" />
<polygon id="name2" data-price="1000" points="80,10 60,50 100,50" />
<polygon id="name3" data-price="2000" points="130,10 110,50 150,50" />
</svg>PS:如果该值高于2500，则不清楚颜色是什么。
关于javascript - 如何使用 svg 多边形自定义属性 (data-*) 来设置这些相同多边形的样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43402525/
25
4
0
是 if(a == 0 && b == 0 && c == 0) { return; } 一样 if(a == 0) { return; } if(b == 0) { return; } if(c =
我想做这样的事情: Class A Class B extends A Class C extends A B b = new B(); C c = new C(); b->setField("foo
我对 Mysql 世界很天真......:)我试图使用连接从表中查询， 我遇到结果集问题...表结构如下 下面... VIDEO_XXXXX | Field | Type
我最近问过关于从另一个类获取类的唯一实例的问题。 ( How to get specific instance of class from another class in Java? ) 所以，我正
假设我们有两种类型 using t1 = int*; using t2 = int*; 我知道 std::is_same::value会给我们true .什么是，或者是否有模板工具可以实现以下目标？
对于我的一个应用程序，我假设比较 2 个字符串的第一个字符比比较整个字符串是否相等要快。例如，如果我知道只有 2 个可能的字符串(在一组 n 字符串中)可以以相同的字母开头(比如说 'q')，如果是这
我想在我的NXP LPC11U37H主板（ARM Cortex-M0）上分析一些算法，因为我想知道执行特定算法需要多少个时钟周期。 我编写了这些简单的宏来进行一些分析： #define START_C
我在 Excel 中创建了一个宏，它将在 Excel 中复制一个表格，并将行除以我确定的特定数字(默认 = 500 行)，并为宏创建的每个部门打开不同的工作表。 使用的代码是这样的: Sub Copy
我想根据第一个字典对第二个字典的值求和。如果我有字典 A 和 B。 A = {"Mark": ["a", "b", "c", "d"], "June": ["e", "a"], "John": ["a
当我这样做时 system()在 Perl 中调用，我通常根据 perldocs 检查返回码.嗯，我是这么想的。大部分时间 $rc!=0对我来说已经足够了。最近我在这里帮助了两个遇到问题的人syste
在我的进度条上，我试图让它检测 div 加载速度。 如果 div 加载速度很快，我想要实现的目标将很快达到 100%。但进度条的加载速度应该与 div 的加载速度一样快。 问题:如何让我的进度条加载
当我获得与本地时间相同的时间戳时，firebase 生成的服务器时间戳是否会自动转换为本地时间，或者我错过了什么？ _firestore.collection("9213903123").docume
根据the original OWL definition of OWL DL ，我们不能为类和个体赋予相同的名称(这是 OWL DL 和 OWL Full 之间的明显区别)。 "Punning" i
我有两个输入复选框: 尝试使用 jQuery 来允许两个输入的行为相同。如果选中第一个复选框，则选中第二个复选框。如果未检查第 1 个，则不会检查第 2 个。反之亦然。 我有代码: $('inpu
可以从不同系统编译两个相同的java文件，但它们都有相同的内容操作系统(Windows 7)，会生成不同的.class文件(大小)？ 最佳答案 是的，您可以检查是否有不同版本的JDK(Java Dev
我正在清理另一个人的正则表达式，他们目前所有的都以结尾 .*$ 那么下面的不是完全一样吗？ .* 最佳答案 .*将尽可能匹配，但默认情况下为 .不匹配换行符。如果您要匹配的文本有换行符并且您处于 MU
我使用 Pick ，但是如何编写可以选择多个字段的通用PickMulti呢？ interface MyInterface { a: number, b: number, c: number
我有一个 SQL 数据库服务器和 2 个具有相同结构和数据的数据库。我在 2 个数据库中运行相同的 sql 查询，其中一个需要更长的时间，而另一个在不到 50% 的时间内完成。他们都有不同的执行计划。
我需要你的帮助，我有一个包含两列的表，一个 id 和 numpos，我希望 id 和 numops 具有相同的结果。 例子: $cnx = mysql_connect( "localhost", "r
如何将相同的列(在本例中按“级别”排序)放在一起？我正在做一个高分，我从我的数据库中按级别列出它们。如果他们处于同一级别，我希望他们具有相同的 ID。 但是我不想在别人身上显示ID。只有第一个。这是一
我是一名优秀的程序员,十分优秀！