d3.js - IE11 上的 D3 节点和链接呈现问题
问题描述
我正在尝试使用 D3 创建流程图。它可以在 Chrome 上正常工作和渲染。但是在 IE 11 和 Edge 上,它会导致渲染问题。
在 Chrome 上,如果我拖动第二个圆圈,箭头会随着圆圈和箭头一起移动。
在 IE 上,圆圈只会移动。
window.states[0].transitions.push( { label : 'waaa!', points : [ { x : 250, y : 30}], target : window.states[ 2]})
window.svg = d3.select( 'body')
.append("svg")
.attr("width", "960px")
.attr("height", "500px");
// define arrow markers for graph links
svg.append('svg:defs').append('svg:marker')
.attr('id', 'end-arrow')
.attr('viewBox', '0 -5 10 10')
.attr('refX', 4)
.attr('markerWidth', 8)
.attr('markerHeight', 8)
.attr('orient', 'auto')
.append('svg:path')
.attr('d', 'M0,-5L10,0L0,5')
.attr('class', 'end-arrow')
;
// line displayed when dragging new nodes
var drag_line = svg.append('svg:path')
.attr({
'class' : 'dragline hidden',
'd' : 'M0,0L0,0'
})
;
var gTransitions = svg.append( 'g').selectAll( "path.transition");
var gStates = svg.append("g").selectAll( "g.state");
var transitions = function() {
return states.reduce( function( initial, state) {
return initial.concat(
state.transitions.map( function( transition) {
return { source : state, transition : transition};
})
);
}, []);
};
var transformTransitionEndpoints = function( d, i) {
var endPoints = d.endPoints();
var point = [
d.type=='start' ? endPoints[0].x : endPoints[1].x,
d.type=='start' ? endPoints[0].y : endPoints[1].y
];
return "translate("+ point + ")";
}
解决方案
推荐阅读
- python - 箱线图中的记录数显示错误
- javascript - 使地图视图适合标记与 Hooks、Function 反应原生地图
- java - 如果 java 的 json 文件中尚不存在,如何添加另一个空的 JsonObject 节点?
- visual-studio - 无法在 Visual Studio 2019 上启动 Tizen 包管理器
- flutter - 增加键盘和 TextField 之间的空间
- okd - OKD 4.5 - 如何在受限网络中升级集群
- flutter - Flutter 软件包更新造成问题
- java - 抽象类如何访问子类的方法?
- fluentd - 仅通过 fluent-bit 收集具有特定字段的日志
- html - 无法通过 HTML iframe 上的“https://view.officeapps.live.com/op/embed.aspx?src=[MSG 文件 URL]”呈现 .MSG 文件