我试图根据以下示例在D3 v4中为我的树形图添加缩放行为:1和2.它是用HTML元素而不是SVG构建的,我通过使用百分比而不是像素单位使其响应.
它到目前为止工作得很好但现在我想通过点击放大到单个细胞,直到到达最后一个孩子.然后点击将返回到树的根.
到目前为止,这是我的代码:http://codepen.io/znak/pen/qapRkQ
我正在努力使用在V4中工作的缩放功能,它遍布整个地方:
function zoom(d) {
console.log('clicked: ' + d.data.name);
x.domain([d.x0, d.x1]);
y.domain([d.y0, d.y1]);
var t = d3.transition()
.duration(800)
.ease(d3.easeCubicOut);
chart
.merge(cell)
.transition(t)
.style("left", function(d) { return x(d.x0) + "%"; })
.style("top", function(d) { return y(d.y0) + "%"; })
.style("width", function(d) { return x(d.x1 - d.x0) + "%"; })
.style("height", function(d) { return y(d.y1 - d.y0) + "%"; });
node = d; //?
d3.event.stopPropagation(); //?
}
Run Code Online (Sandbox Code Playgroud)
如何使用D3 v4更新和转换元素?
谢谢你的任何提示!
在Three.js中,是否可以创建一个包含多个纹理的材质(着色器?),每个纹理都有自己的细节,将它们混合在一起并分配给几何体?我想用纸张压花或点UV涂漆等多种涂饰技术来模拟纸张表面.
我想要实现的是具有以下特征的材料:
所有单独图层的原因是我想单独控制它们(替换不同的纹理并在运行时更改值).除了"图像"图层,我不确定应该将其他图层使用哪些混合值来实现逼真的模拟效果.
为了说明适用于纸张的修整技术,请查看以下照片(由PrintHouse Corporation提供):
盲压花(图案)和金箔凹陷(标识,标题)
银箔凹陷(标识)和现货UV清漆(照片)
现货UV清漆(线条)
它可能吗?我找不到任何会使用这种复杂材料的Three.js例子.如果您能指出我或者解释如何以编程方式处理此问题,我将不胜感激.
我正在尝试创建一个图表,该图表显示同一层次结构级别上的节点之间的链接,但是在圆形布局中显示不同的组.它基本上是附加到Circos对象的关键字/标签/组的可视化:
var data =
[
{
"name": "Adam",
"tags": ["tall", "blonde"]
},
{
"name": "Barbara",
"tags": ["tall", "brunette", "student", "single"]
}
];
Run Code Online (Sandbox Code Playgroud)
或者,就像我正在尝试做的事情:
var data =
[
{
"name": "Project 1",
"categories":
[
"Category A",
"Category B",
"Category C",
"Category D"
]
},
{
"name": "Project 2",
"categories":
[
"Category C",
"Category D",
"Category E"
]
},
{
"name": "Project 3",
"categories":
[
"Category A",
"Category E"
]
},
{
"name": "Project 4",
"categories":
[
"Category A",
"Category …Run Code Online (Sandbox Code Playgroud) 我试图在 Three.js 中的导入模型(通过 Collada 加载器)中选择特定材质。我知道这可以用该getChildByName方法来完成,但它对我不起作用。我也找不到包含此方法的任何工作示例。
我在这里做错了什么?
loader = new THREE.ColladaLoader();
loader.load('myModel.dae', function ( collada ) {
model = collada.scene;
var myMaterial = model.getChildByName( 'materialName', true );
myMaterial.material = new THREE.MeshBasicMaterial( { wireframe: true } );
});
Run Code Online (Sandbox Code Playgroud) 我已经按照Mapbox网站上的示例和GitHub上的这条说明进行操作,但无法在我的地图上显示标记:
http://codepen.io/znak/pen/waPPRj(使用Mapbox样式和精灵) http://codepen.io/znak/pen/PqOEyV(使用自定义样式和精灵)
var center = [51.5, -0.1];
var map = new mapboxgl.Map({
container: 'map',
center: center,
zoom: 8,
style: 'https://www.mapbox.com/mapbox-gl-styles/styles/mapbox-streets-v7.json'
});
// Markers
map.on('style.load', function() {
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.48, -0.08]
},
"properties": {
"title": "Lorem",
"marker-symbol": "default_marker"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.52, -0.12]
},
"properties": {
"title": "Ipsum",
"marker-symbol": "secondary_marker" …Run Code Online (Sandbox Code Playgroud)