добавить строку ко всем xAxis и yAxis

Мне нужна помощь с вопросом о том, как рисовать дорожку при каждом значении xAxis и yAxis.добавить строку ко всем xAxis и yAxis

Теперь у меня есть этот результат:

И мне нужен результат, как этот:

Я думаю, что его что-то вроде:

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis);

, но им не уверен ... Если у кого-то есть идея, просто скажите мне.

Действительно спасибо всем ответ

<html> 
    <head> 
     <title></title> 
     <script src="d3.min.js"></script> 
     <style> 
      body { 
    font: 10px sans-serif; 
} 


.axis path { 
    fill: #E0E0E0; 
    stroke: #bbb; 
    shape-rendering: crispEdges; 
} 

.axis text { 
    fill: #000; 
} 

.axis line {  
    stroke-width: 1; 
} 

.axis .axis-label { 
    font-size: 10px; 
} 

.line { 
    stroke-width: 2; 
} 

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

     </style> 
    </head> 
    <body> 
     <input type="button" name="0" value="amaga" onclick="amagar(this.name);"/> 
     <input type="button" name="1" value="amaga" onclick="amagar(this.name);"/> 
     <input type="button" name="2" value="amaga" onclick="amagar(this.name);"/> 
     <input type="button" name="3" value="amaga" onclick="amagar(this.name);"/> 

     <input type="button" name="4" value="amaga" onclick="amagalinea(this.name);"/> 
     <input type="button" name="5" value="amaga" onclick="amagalinea(this.name);"/> 
    <script> 
    var data = [ 
    //VERD 
    [{'x':15000,'y':0}, {'x':15000,'y':130},{'x':40000,'y':130},{'x':40000,'y':0}, 
    {'x':60000,'y':0},{'x':60000,'y':130},{'x':70000,'y':130},{'x':70000,'y':0},], 

    // GRIS PARADA 
    [{'x':40000,'y':0}, {'x':40000,'y':130}, {'x':60000,'y':130},{'x':60000,'y':0}], 

    //TARONJA TRABAJO 
    [{'x':16000,'y':40},{'x':16000,'y':80}, {'x':37000,'y':80}, {'x':37000,'y':40}], 

    //BLAU RALENTI 
    [{'x':17000,'y':0},{'x':17000,'y':40},{'x':35000,'y':40},{'x':35000,'y':0} ], 

    //LINEA VELOCITAT 
    [{'x':10000,'y':0},{'x':12000,'y':80}, {'x':15000,'y':70}, {'x':17000,'y':80},{'x':19000,'y':100}, 
    {'x':20000,'y':55}, {'x':27000,'y':85}, {'x':33000,'y':65}, {'x':37000,'y':25}, {'x':40000,'y':65}, {'x':45000,'y':77}, 
    {'x':50000,'y':47}, {'x':55000,'y':88}, {'x':59000,'y':25}, {'x':66000,'y':0}], 

    //LINEA TEMPERATURA 
    [{'x':10000,'y':0},{'x':12000,'y':20}, {'x':15000,'y':15}, {'x':17000,'y':18},{'x':19000,'y':17}, 
    {'x':20000,'y':15}, {'x':27000,'y':19}, {'x':33000,'y':12}, {'x':37000,'y':21}, {'x':40000,'y':23}, {'x':45000,'y':15}, 
    {'x':50000,'y':18}, {'x':55000,'y':19}, {'x':59000,'y':21}, {'x':66000,'y':20}] 
]; 

var colors = [ 
    '#B4EEB4', 
    'gray', 
    'orange', 
    'blue', 
    'red', 
    'pink' 
] 


var margin = {top: 5, right: 30, bottom: 35, left: 50}, 
    width = 960 - margin.left - margin.right, 
    height = 200 - margin.top - margin.bottom; 

var x = d3.scale.linear() 
    .domain([0, 24]) 
    .range([0, width]); 


var y = d3.scale.linear() 
    .domain([0, 140]) 
    .range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .ticks(24) 
    .tickSize(-height) 
    .tickPadding(10)  
    .tickSubdivide(true)  
    .orient("bottom") 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .ticks(5) 
    .tickPadding(10) 
    .tickSize(-width) 
    .tickSubdivide(true)  
    .orient("left"); 

var svg = 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 + ")"); 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

svg.append("g") 
    .attr("class", "x axis") 
    .append("text") 
    .attr("class", "axis-label") 
    .attr("y", height+35) 
    .attr("x", width/2-15) 
    .text('Horas'); 



svg.append("g") 
    .attr("class", "y axis") 
    .append("text") 
    .attr("class", "axis-label") 
    .attr("transform", "rotate(-90)") 
    .attr("y", (-margin.left) + 10) 
    .attr("x", -height/2-20) 
    .text('Velocidad KM/H');  

svg.append("clipPath") 
    .attr("id", "clip") 
    .append("rect") 
    .attr("width", width) 
    .attr("height", height); 

var line = d3.svg.line() 
    .interpolate("linear") 
    .x(function(d) { return x(d.x/3600); }) 
    .y(function(d) { return y(d.y); });  

svg.selectAll('.line') 
    .data(data) 
    .enter() 
    .append("path") 
    .attr("class", "line") 
    .attr("clip-path", "url(#clip)") 
    .attr('fill', function(d,i){ 
     return i < 4 ? colors[i % colors.length] : 'none'; 
    }) 
    .attr("d", line);  


svg.selectAll('.line') 
    .attr('stroke', function(d,i){ 
     return i >= 4 ? colors[i % colors.length] : 'none'; 
    }); 


function amagar(a){ 
    if(d3.select(svg.selectAll('.line')[0][a]).attr("fill") != "none"){ 
     d3.select(svg.selectAll('.line')[0][a]).attr("fill", "none"); 

     } 
    else 
     d3.select(svg.selectAll('.line')[0][a]).attr("fill", colors[a % colors.length]); 
} 

function amagalinea(a){ 

    if(d3.select(svg.selectAll('.line')[0][a]).attr("stroke") != "none") 
     d3.select(svg.selectAll('.line')[0][a]).attr("stroke", "none"); 
    else 
    d3.select(svg.selectAll('.line')[0][a]).attr("stroke", colors[a % colors.length]); 
} 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis); 


    </script> 

    </body> 

</html>

источник

2016-01-14 Sebas Bejenaru

Ознакомьтесь с документацией d3. То, что вы хотите, это «клещи» –

Вы можете добавить второй набор функций оси для тиков, а другой для сетки. https://jsfiddle.net/ermineia/ah2bv6t5/

var xGrid = d3.svg.axis() 
    .scale(x) 
    .ticks(24) 
    .tickSize(-height) 
    .tickPadding(10)  
    .tickSubdivide(true)  
    .orient("bottom") 
    .tickFormat(''); 
var xAxis = d3.svg.axis() 
    .scale(x) 
    .ticks(24) 
    .tickSize(5) 
    .tickPadding(10)  
    .tickSubdivide(true)  
    .orient("bottom"); 

var yGrid = d3.svg.axis() 
    .scale(y) 
    .ticks(5) 
    .tickPadding(10) 
    .tickSize(-width) 
    .tickSubdivide(true)  
    .orient("left") 
    .tickFormat(''); 
var yAxis = d3.svg.axis() 
    .scale(y) 
    .ticks(5) 
    .tickPadding(10) 
    .tickSize(5) 
    .tickSubdivide(true)  
    .orient("left"); 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xGrid); 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yGrid); 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis);

источник

2016-01-14 13:45:21

Отлично! спасибо Джорджу –

добавить строку ко всем xAxis и yAxis

ответ

Смежные вопросы