如何用d3.js將圖表移動到右側？

我使用d3.js創建一些圖表。我在圖表中添加了一些網格線，結果爲here。所以我想，我必須將網格移動到右側以識別軸，我還希望將值固定在x軸上（每行只能有10個值：13000,13100,13200,13300,13400 ，13500，13600，13700，13800，13900，14000），這裏是整個代碼：如何用d3.js將圖表移動到右側？

<!DOCTYPE html> 


<style> /* set the CSS */ 


.grid line { 
    stroke: aquamarine; 
    stroke-opacity: 0.7; 
    shape-rendering: crispEdges; 
} 

.grid path { 
    stroke-width: 1; 
} 

</style> 
<style> 
body { 
    background-color: #262f39; 
} 
</style> 
<svg id="svg1" width="1000" height="500"></svg> 
<script src="https://d3js.org/d3.v4.min.js"></script> 
<script> 

// set the dimensions and margins of the graph 
var svg1 = d3.select("#svg1"), 
    margin = {top: 1, right: 0, bottom: 90, left: 50}, 
    width = 950 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom, 
    g1 = svg1.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


var x = d3.scaleLinear() 
.rangeRound([0, width]); 

var y = d3.scaleLinear() 
.rangeRound([height, 0]); 

// gridlines in x axis function 
function make_x_gridlines() { 
    return d3.axisBottom(x) 
     .ticks(5) 
} 

// gridlines in y axis function 
function make_y_gridlines() { 
    return d3.axisLeft(y) 
     .ticks(5) 
} 

var line = d3.line() 
.x(function(d) { return x(d.frequency); }) 
.y(function(d) { return y(d.output); }); 




d3.csv("Measurements.csv", function(d) { 
    d.frequency = +d.frequency; 
    d.output = +d.output; 
    return d; 
}, function(error, data) { 
    if (error) throw error; 

x.domain(d3.extent(data, function(d) { return d.frequency; })); 
y.domain(d3.extent(data, function(d) { return d.output; })); 

    g1.append("g") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x)) 
     .append("text") 
     .attr("fill", "#000") 
     .attr("y", 11) 
     .attr("dx", "0.71em") 
     .attr("text-anchor", "end") 
     .text("Frequency"); 


    g1.append("g") 
     .call(d3.axisLeft(y)) 
    .append("text") 
     .attr("fill", "#000") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 15) 
     .attr("dy", "0.71em") 
     .attr("text-anchor", "end") 
     .text("Mixer Output"); 

    g1.append("path") 
     .datum(data) 
     .attr("fill", "none") 
     .attr("stroke", "aquamarine") 
     .attr("stroke-linejoin", "round") 
     .attr("stroke-linecap", "round") 
     .attr("stroke-width", 4) 
     .attr("d", line); 

     // add the X gridlines 
    svg1.append("g") 
     .attr("class", "grid") 
     .attr("transform", "translate(0," + height + ")") 
     .call(make_x_gridlines() 
      .tickSize(-height) 
      .tickFormat("") 
    ) 

    // add the Y gridlines 
svg1.append("g") 
    .attr("class", "grid") 
    .call(make_y_gridlines() 
     .tickSize(-width) 
     .tickFormat("") 
    ) 


}); 

</script> 
<svg id="svg2" width="1000" height="500"></svg> 
<script> 

// set the dimensions and margins of the graph 
var svg2 = d3.select("#svg2"), 
    margin = {top: 1, right: 0, bottom: 90, left: 50}, 
    width = 950 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom, 
    g2 = svg2.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


var x2 = d3.scaleLinear() 
    .rangeRound([0, width]); 

var y2 = d3.scaleLinear() 
    .rangeRound([height, 0]); 

    // gridlines in x axis function 
    function make_x_gridlines() { 
     return d3.axisBottom(x2) 
      .ticks(10) 
    } 

    // gridlines in y axis function 
function make_y_gridlines() { 
    return d3.axisLeft(y2) 
     .ticks(5) 
} 

var line = d3.line() 
    .x(function(d) { return x(d.frequency); }) 
    .y(function(d) { return y(d.output); }); 




d3.csv("m11.csv", function(d) { 
    d.frequency = +d.frequency; 
    d.output = +d.output; 
    return d; 
}, function(error, data) { 
    if (error) throw error; 

x.domain(d3.extent(data, function(d) { return d.frequency; })); 
y.domain(d3.extent(data, function(d) { return d.output; })); 

    g2.append("g") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x)) 
    .append("text") 
    .attr("fill", "#000") 
    .attr("y", 11) 
    .attr("dx", "0.71em") 
    .attr("text-anchor", "end") 
    .text("Frequency"); 


g2.append("g") 
    .call(d3.axisLeft(y)) 
    .append("text") 
    .attr("fill", "#000") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 9) 
    .attr("dy", "0.71em") 
    .attr("text-anchor", "end") 
    .text("Delay"); 

g2.append("path") 
    .datum(data) 
    .attr("fill", "none") 
    .attr("stroke", "aquamarine") 
    .attr("stroke-linejoin", "round") 
    .attr("stroke-linecap", "round") 
    .attr("stroke-width", 4) 
    .attr("d", line); 

    // add the X gridlines 
svg2.append("g") 
    .attr("class", "grid") 
    .attr("transform", "translate(0," + height + ")") 
    .call(make_x_gridlines() 
     .tickSize(-height) 
     .tickFormat("") 
    ) 

    // add the Y gridlines 
svg2.append("g") 
    .attr("class", "grid") 
    .call(make_y_gridlines() 
     .tickSize(-width) 
     .tickFormat("") 
    ) 


}); 

</script>

來源

2017-07-31 mata xarh

你可以添加一個小提琴的整個代碼？ –

以下[這些]（https://meta.stackoverflow.com/a/291370/1783163）簡單的規則可以改善您的問題很多。我建議跟着他們。我現在部分解決了你的問題，但我不能每次都和你在一起:-) – peterh

看來你使用AG元素翻譯的圖形，並添加一定的餘量，但你直接附加的網格svg。

嘗試將網格添加到g元素。

來源

2017-07-31 16:24:34

如何用d3.js將圖表移動到右側？

回答

相關問題