目前,我正在构建系统,并且在更新功能方面遇到一些麻烦。
本质上,我试图将新节点添加到D3树中。当用户单击节点的“添加按钮”时,可以添加新的子节点。每个添加按钮都可以在每个节点的左侧找到。
我遵循了Mike Bostock的一般更新模式。一旦单击按钮,唯一的“新”数据元素应该是新创建的子节点,但是看起来整个数据都被视为“新”。当我查看每个节点的类名称以及所有节点都过渡到中心节点并消失的明显事实时,我得出了这个结论。其他原始数据应“更新”,但不是。任何人都可以轻轻地指出为什么会这样吗?
我的代码的工作示例可以在此jfiddle链接中找到。
编辑06/09
根据戈登的建议,我为我的节点和链接都找到了一个唯一的字段。因此,为了唯一标识数据,我进行了以下更改:
节点
.data(d, d => d.data.name)
Run Code Online (Sandbox Code Playgroud)
链接
.data(d, d => d.source.data.name)
Run Code Online (Sandbox Code Playgroud)
该更改有效(大部分情况下),但我看到一些奇怪的行为仍在发生:(1)分支7.2.1仍被识别为新节点并消失了;(2)在第二个“添加”之后,链接未正确地与其各自的节点对齐。我认为我的两个小修改正在影响这一点,因为当我返回原始代码时,尽管事实上它们正在过渡,但线条已正确绘制。有什么想法吗?忠告?
的HTML
<div id="div-mindMap">
Run Code Online (Sandbox Code Playgroud)
的CSS
.linkMindMap {
fill: none;
stroke: #555;
stroke-opacity: 0.4;
}
rect {
fill: white;
stroke: #3182bd;
stroke-width: 1.5px;
}
Run Code Online (Sandbox Code Playgroud)
JS
const widthMindMap = 700;
const heightMindMap = 700;
let parsedData;
let parsedList = {
"name": " Stapler",
"children": [{
"name": " Bind",
"children": []
},
{
"name": " Nail",
"children": []
},
{
"name": " …Run Code Online (Sandbox Code Playgroud) 我正在开发这个项目,我想在其中合并这些图标。我对 AngularJS 很陌生,所以如果您能详细说明您的答案,我们将不胜感激。
我正在使用 OpenWeatherMap API,我想根据当前的天气描述显示适当的图标。对于未来的步骤,我想为所有不同的选项添加一个 switch 语句,但我什至无法使其与单个选项一起使用。
在 github 存储库中,它指出“图标是通过使用 i 元素并添加基类 wi 和您想要的图标类(例如 day-sunny)来显示的。这看起来像<i class="wi wi-day-sunny"></i>。”
应用程序.js
var classApp= angular.module('weatherApp', []);
classApp.controller('weatherCtrl', function($scope, $http){
var vm = $scope;
};
$http.get("http://ip-api.com/json").success(function(data){
vm.lat= data.lat;
vm.lon=data.lon;
var apiKey= "key"; //removed key
var openWeatherURL = "http://api.openweathermap.org/data/2.5/weather?lat="+ vm.lat + "&lon="+vm.lon+ "&appid=" +apiKey;
$http.get(openWeatherURL).success(function(data){
**vm.weatherClass= "wi wi-owm-731"; //USING THIS LINE FOR NOW**
// Hour between sunset and sunrise being night time
var night = false;
**vm.weatherClass2 = $("#icon").attr("class", " wi …Run Code Online (Sandbox Code Playgroud)