//核心算法思路是Big boss教的,我借花献佛 function dataProcessing(xLinearScale) { var angle = Math.PI / 2.3; for (var i = 0; i < data.length; i++) { var d = data[i]; var depth = 10; d.ow = xLinearScale.bandwidth() * 0.7; d.ox = xLinearScale(d.letter); d.oh = 1; d.p1 = { x: Math.cos(angle) * d.ow, y: -Math.sin(angle) - depth }; d.p2 = { x: d.p1.x + d.ow, y: d.p1.y }; d.p3 = { x: d.p2.x, y: d.p2.y + d.oh }; } }
渲染
最终我们还要鼠标进行交互,所以先添加tip生成函数
//tip的创建方法(方法来自敬爱的鸣哥) var tipTimerConfig = { longer: 0, target: null, exist: false, winEvent: window.event, boxHeight: 398, boxWidth: 376, maxWidth: 376, maxHeight: 398, tooltip: null, showTime: 3500, hoverTime: 300, displayText: "", show: function (val, e) { "use strict"; var me = this; if (e != null) { me.winEvent = e; } me.displayText = val; me.calculateBoxAndShow(); me.createTimer(); }, calculateBoxAndShow: function () { "use strict"; var me = this; var _x = 0; var _y = 0; var _w = document.documentElement.scrollWidth; var _h = document.documentElement.scrollHeight; var wScrollX = window.scrollX || document.body.scrollLeft; var wScrollY = window.scrollY || document.body.scrollTop; var xMouse = me.winEvent.x + wScrollX; if (_w - xMouse < me.boxWidth) { _x = xMouse - me.boxWidth - 10; } else { _x = xMouse; } var _yMouse = me.winEvent.y + wScrollY; if (_h - _yMouse < me.boxHeight + 18) { _y = _yMouse - me.boxHeight - 25; } else { _y = _yMouse + 18; } me.addTooltip(_x, _y); }, addTooltip: function (page_x, page_y) { "use strict"; var me = this; me.tooltip = document.createElement("div"); me.tooltip.style.left = page_x + "px"; me.tooltip.style.top = page_y + "px"; me.tooltip.style.position = "absolute"; me.tooltip.style.width = me.boxWidth + "px"; me.tooltip.style.height = me.boxHeight + "px"; me.tooltip.className = "three-tooltip"; var divInnerHeader = me.createInner(); divInnerHeader.innerHTML = me.displayText; me.tooltip.appendChild(divInnerHeader); document.body.appendChild(me.tooltip); }, createInner: function () { "use strict"; var me = this; var divInnerHeader = document.createElement('div'); divInnerHeader.style.width = me.boxWidth + "px"; divInnerHeader.style.height = me.boxHeight + "px"; return divInnerHeader; }, ClearDiv: function () { "use strict"; var delDiv = document.body.getElementsByClassName("three-tooltip"); for (var i = delDiv.length - 1; i >= 0; i--) { document.body.removeChild(delDiv[i]); } }, createTimer: function (delTarget) { "use strict"; var me = this; var delTip = me.tooltip; var delTarget = tipTimerConfig.target; var removeTimer = window.setTimeout(function () { try { if (delTip != null) { document.body.removeChild(delTip); if (tipTimerConfig.target == delTarget) { me.exist = false; } } clearTimeout(removeTimer); } catch (e) { clearTimeout(removeTimer); } }, me.showTime); }, hoverTimerFn: function (showTip, showTarget) { "use strict"; var me = this; var showTarget = tipTimerConfig.target; var hoverTimer = window.setInterval(function () { try { if (tipTimerConfig.target != showTarget) { clearInterval(hoverTimer); } else if (!tipTimerConfig.exist && (new Date()).getTime() - me.longer > me.hoverTime) { //show tipTimerConfig.show(showTip); tipTimerConfig.exist = true; clearInterval(hoverTimer); } } catch (e) { clearInterval(hoverTimer); } }, tipTimerConfig.hoverTime); } }; var createTooltipTableData = function (info) { var ary = []; ary.push("<div>"); ary.push("<h1>品种信息:" + info.letter + "</h1>"); ary.push("<h2>成交量: " + info.child.value); ary.push("</div>"); return ary.join(""); };
核心算法写完,就到了最终的渲染了