麻煩d3.js - 縮放路徑形狀

我想這個講話泡沫大規模進入存在。我不確定如何去做，因爲默認的d3比例尺正在改變它開始繪製的區域。麻煩d3.js - 縮放路徑形狀

var svgHeight = 1000 
var svgWidth = 1000 
var floatycircleRadius = 30 
var textColor = "#FFFFFF" 

var svg = d3.select("body").append("svg") 
    .attr("width", svgHeight) 
    .attr("height", svgWidth) 


var floatycontainer = svg.append("g"); 

var floatygroup = floatycontainer.append("g") 

var floatypath = floatygroup.append("path") 
    .attr("d", "m125.512,0h-66C26.645,0,0,26.482,0,59.35c0,28.574,20.142,52.312,47,58.029V145l26.283-26.283, l52.229,0.064c32.868,0,59.512-26.563,59.512-59.431S158.38,0,125.512,0z") 
    .style("fill", "#90C4E4") 

floatygroup.attr("transform", "translate(500, 500)") 

floatycontainer.attr("transform", "scale(1)"); 

floatycontainer.transition().duration(2000).attr("transform", "0")

來源

2013-08-30 TheMcMurder

是的。我在測試過程中嘗試找到問題的解決方案。該行已被刪除。 – TheMcMurder

的<g>或<path>元素上使用transition. attrTween (name, tween)。

.attrTween("transform", function(d, i, a) { 
    return d3.interpolateString(a, 'scale(1)'); 
});

http://jsfiddle.net/Wexcode/2jFP5/

來源

2013-08-30 17:06:20 Wex

這比我下面的解決方案更好。謝謝你的幫助。 – TheMcMurder

所以，問題不在於我無法獲得該項目規模。這是當項目縮放時，「M」屬性也發生移動，並且由於路徑上的相對和絕對點混合，svg元素在頁面上飛行。

手動更改線路的所有相關之後，我就可以完成我的項目，我發現了一個javascript腳本的所有路徑更改爲相對的。然後，我可以手動將「M」屬性更改爲0，以便標尺可以正確工作（Convert SVG Path to Relative Commands）。

我修改，以更好地滿足我的需求和使用gist.github.com和bl.ocks.org所以這是一個簡單的網站來獲取所有相對路徑建立這個簡單的頁面腳本。它適合我的長期使用案例，我想我會分享給那些感興趣的人。謝謝你的幫助。

http://bl.ocks.org/TheMcMurder/6393419（需轉換的實時頁面）

來源

2013-08-30 20:54:59 TheMcMurder

麻煩d3.js - 縮放路徑形狀

回答

相關問題