D3.js與軸的幹線圖

我在將軸添加到幹線圖時遇到了問題。我在版本3中使用D3.js。我繪製了由圓圈和線組成的自己的莖。D3.js與軸的幹線圖

我有兩種方案：

1.
1.1首先我添加莖
1.2然後，添加軸

Y軸是在杆繪製。在接下來的圖像的品紅色線覆蓋綠色酮（我想要的對面，幹應涵蓋軸）

2.1首先我添加軸
2.2然後，添加莖

莖的線不被繪製。

我需要有人向我解釋爲什麼不畫線。

文件js/stem-functions.js

var svgParams = { 
    // Graph field 
    graphWidth : 200, 
    graphHeight : 120, 
    // Margins 
    leftPadding : 30, 
    rightPadding : 10, 
    upPadding : 15, 
    downPadding : 25, 
} 

function setParametersSvg() { 
    // Size of the SVG object 
    this.svgWidth = this.graphWidth + this.leftPadding + this.rightPadding; 
    this.svgHeight = this.graphHeight + this.upPadding + this.downPadding; 
} 

setParametersSvg.apply(svgParams); 

// Create Scale functions 

var xScale = (function ustawSkaleX(minX, maxX, svgParam) { 
    var xSc = d3.scale.linear() 
    .domain([minX, maxX]) 
    .range([svgParam.leftPadding, svgParam.leftPadding + svgParam.graphWidth]); 

    return xSc; 
} (0, 5, svgParams)); 


var yScale = (function ustawSkaleY(minY, maxY, svgParam) { 
    var ySc = d3.scale.linear() 
    .domain([minY, maxY]) 
    .range([svgParam.upPadding + svgParam.graphHeight, svgParam.upPadding]); 

    return ySc; 
} (0, 0.5, svgParams)); 


function addAxis(svg, svgParam, xScale, yScale) { 
    // Functions drawing axis X 
    var xAxis = d3.svg.axis(); 
    xAxis.scale(xScale) // Scale function for X 
    .orient("bottom") // Location of label 
    .ticks(7);  // Ticks 

    // Add group 
    svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0," + (svgParam.svgHeight - svgParam.downPadding) +")") 
    .call(xAxis); 

    // Functions drawing axis Y 
    var yAxis = d3.svg.axis(); 
    yAxis.scale(yScale) // Scale function for Y 
    .orient("left") // Location of label 
    .ticks(4);  // Ticks 

    // Add group 
    svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(" + (svgParam.leftPadding) + ", 0)") 
    .call(yAxis); 
} 

function addStems(svg, dataset, xScale, yScale) { 
    var circles = svg.selectAll("circle") 
    .data(dataset) 
    .enter() 
    .append("circle") 
    .attr("fill", "green") 
    .attr("cx", function(d) { return xScale(d.x); }) 
    .attr("cy", function(d) { return yScale(d.n); }) 
    .attr("r", 4);  

    var lines = svg.selectAll("line") 
    .data(dataset) 
    .enter() 
    .append("line") 
    .attr("class", "stem-line") 
    .attr("stroke", "green") 
    .attr("stroke-width", "1") 
    .attr("x1", function(d) { return xScale(d.x); }) 
    .attr("x2", function(d) { return xScale(d.x); }) 
    .attr("y1", function(d) { return yScale(0); }) 
    .attr("y2", function(d) { return yScale(d.n); }); 
}

文件js/stem-examples.js

// Data set 
var p = [ 
    { x: 0, n: 0.15 }, 
    { x: 1, n: 0.25 }, 
    { x: 2, n: 0.40 }, 
    { x: 3, n: 0.15 }, 
    { x: 4, n: 0.05 } 
    ]; 

console.log('probabilities ', p); 

d3.select("body").append("h4").html("Call Stems printing before Axis printing"); 

// Stems before Axis => Axis is over stem 
var svg1 = d3.select("body") 
    .append("svg") 
    .attr("width", svgParams.svgWidth) 
    .attr("height", svgParams.svgHeight); 

addStems(svg1, p, xScale, yScale); 

addAxis(svg1, svgParams, xScale, yScale); 

d3.select("body").append("br"); 

d3.select("body").append("h4").html("Call Axis printing before Stems printing"); 

// Axis before Stems => stem lines are gone (why?) 
var svg2 = d3.select("body") 
    .append("svg") 
    .attr("width", svgParams.svgWidth) 
    .attr("height", svgParams.svgHeight); 

addAxis(svg2, svgParams, xScale, yScale); 

addStems(svg2, p, xScale, yScale);

文件css/styl.js

svg { border: teal 1px solid; } 

.axis path, .axis line { 
    fill: none; 
    stroke: magenta; 
    stroke-width: 1; 
    shape-rendering: crispEdges; 
} 

.axis text { 
    font-family: sans-serif; 
    font-size: 12px; 
    fill: DarkViolet; 
}

文件index.html

來源

2017-10-10 mwloda

第一追加的軸，然後莖是正確的做法。問題不在於此。

的問題是，當你這樣做......

var lines = svg.selectAll("line") 
    .data(dataset) 
    .enter() 
    .append("line") 
    //etc...

...你選擇已經在SVG存在的線，並且將數據綁定到他們。

解決方案

這樣做：

var lines = svg.selectAll(null) 
    .data(dataset) 
    .enter() 
    .append("line") 
    //etc...

要理解爲什麼我選擇null，看看這個問題/答案我的位置：Selecting null: what is the reason of using 'selectAll(null)' in D3.js?

來源

2017-10-10 11:02:48

D3.js與軸的幹線圖

回答

相關問題