d3js two svg，one external postitioning

嘿所以我採取了兩個例子的代碼，並試圖讓他們在同一個網頁上展示。在這裏工作jsfiddle http://jsfiddle.net/s40ustz1/4/ 問題是，當我添加第二個svg元素時，所有的節點定位都變得不可靠。我想添加的代碼是d3js two svg，one external postitioning

// Set the dimensions of the canvas/graph 
var margin = {top: 30, right: 20, bottom: 30, left: 50}, 
width = 400 - margin.left - margin.right, 
height = 220 - margin.top - margin.bottom; 

// Parse the date/time 
var parseDate = d3.time.format("%d-%b-%y").parse; 

// Set the ranges 
var x = d3.time.scale().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 

// Define the axes 
var xAxis = d3.svg.axis().scale(x) 
.orient("bottom").ticks(5); 

var yAxis = d3.svg.axis().scale(y) 
.orient("left").ticks(5); 

// Define the line 
var valueline = d3.svg.line() 
.x(function(d) { return x(d.date); }) 
.y(function(d) { return y(d.close); }); 
// Adds the svg canvas 
var chart2 = d3.select("body") 
.append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

// Get the data 
d3.csv("http://bl.ocks.org/d3noob/raw/5987480/data2.csv", function(error, data) { 
data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    d.close = +d.close; 
}); 

// Scale the range of the data 
x.domain(d3.extent(data, function(d) { return d.date; })); 
y.domain([0, d3.max(data, function(d) { return d.close; })]); 

// Add the valueline path. 
chart2.append("path") 
    .attr("class", "line") 
    .attr("d", valueline(data)); 

// Add the X Axis 
chart2.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

// Add the Y Axis 
chart2.append("g") 
    .attr("class", "y axis") 
    .call(yAxis); 
});

主要的例子，我已經採取代碼是。 http://bl.ocks.org/fhernand/9a9f93f2a6b0e83a9294

我已經嘗試添加div容器，但他們似乎沒有幫助。我究竟做錯了什麼？

來源

2015-09-10 KNN. T

我最終通過足夠的試驗和錯誤+一些研究發現了我自己的問題。我用來附加我的外部SVG文件的方法導致了這些問題，儘管我不知道爲什麼。因此，而不是加載文檔是這樣的：

d3.xml("http://bl.ocks.org/fhernand/raw/9a9f93f2a6b0e83a9294/field.svg",  function (xml) { 
svgdom = document.body.appendChild(xml.documentElement); 

var svg = d3.select("svg"); 
var defs = d3.select("defs");

我不是裝這樣的：

var main_map_div = d3.select("body") 
    .append("div"); 

d3.xml("field.svg", function (error, documentFragment) { 
if (error) {console.log(error); return;} 
var svgNode = documentFragment 
       .getElementsByTagName("svg")[0]; 
main_map_div.node().appendChild(svgNode); 
svg = main_map_div.select("svg")

如果我不得不採取一個猜測，爲什麼它的工作原理，它很可能是因爲我我現在將svg文件附加到一個div，我以前不知道該怎麼做。工作的jsfiddle這裏： http://jsfiddle.net/s40ustz1/7/

注：CSS樣式可能會關閉，但它的工程！

來源

2015-09-16 09:56:38

d3js two svg，one external postitioning

回答

相關問題