Javascript 向所有X轴和Y轴添加行_Javascript_Css_D3.js_Svg

Javascript 向所有X轴和Y轴添加行

javascript css d3.js svg

Javascript 向所有X轴和Y轴添加行,javascript,css,d3.js,svg,Javascript,Css,D3.js,Svg,我需要一个关于如何在xAxis和yAxis的每个值上绘制车道的问题的帮助现在我有了这个结果：我需要这样的结果：我认为这有点像： svg.append("g") .attr("class", "y axis") .call(yAxis); 但是我不确定。。。如果有人有主意。。告诉我真的感谢所有的回应 <html> <head> <title></title> <script

我需要一个关于如何在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>


身体{
字体：10px无衬线；
}
.轴路径{
填充：#e0；
冲程：#bbb；
形状渲染：边缘清晰；
}
.轴文本{
填写：#000；
}
.轴线{
笔画宽度：1；
}
.axis.axis标签{
字体大小：10px；
}
.线路{
笔画宽度：2；
}
.y轴线，.y轴路径{
填充：无；
笔画：灰色；
形状渲染：边缘清晰；
笔画宽度：1；
}
风险值数据=[
//佛得角
[{'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}，],，
//格里斯帕拉达酒店
[{'x'：40000，'y'：0}，{'x'：40000，'y'：130}，{'x'：60000，'y'：130}，{'x'：60000，'y'：0}]，
//塔罗尼亚·特拉巴霍
[{'x'：16000，'y'：40}，{'x'：16000，'y'：80}，{'x'：37000，'y'：80}，{'x'：37000，'y'：40}]，
//布劳拉伦蒂
[{'x'：17000，'y'：0}，{'x'：17000，'y'：40}，{'x'：35000，'y'：40}，{'x'：35000，'y'：0}]，
//速度线
[{'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}，
//温度线
[{'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}]
];
变量颜色=[
"B4EEB4",，
“灰色”，
“橙色”，
“蓝色”，
“红色”，
“粉红”
]
var margin={顶部：5，右侧：30，底部：35，左侧：50}，
宽度=960-margin.left-margin.right，
高度=200-margin.top-margin.bottom；
var x=d3.scale.linear（）
.domain（[0,24]）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.domain（[0，140]）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.滴答声（24）
.1尺寸（高度）
.1（10）
.tickSubdivide（真）
.orient（“底部”）
var yAxis=d3.svg.axis（）
.比例（y）
.滴答声（5）
.1（10）
.1.1尺寸（-宽度）
.tickSubdivide（真）
.东方（“左”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“x轴”）
.append（“文本”）
.attr（“类”、“轴标签”）
.attr（“y”，高度+35）
.attr（“x”，宽度/2-15）
.文本（“Horas”）；
svg.append（“g”）
.attr（“类”、“y轴”）
.append（“文本”）
.attr（“类”、“轴标签”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，（-margin.left）+10）
.attr（“x”，高度/2-20）
.文本（“速度/公里/小时”）；
svg.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var line=d3.svg.line（）
.插入（“线性”）
.x（函数（d）{返回x（d.x/3600）；}）
.y（函数（d）{返回y（d.y）；}）；
svg.selectAll（“.line”）
.数据（数据）
.输入（）
.append（“路径”）
.attr（“类”、“行”）
.attr（“剪辑路径”、“url（#剪辑）”）
.attr（'fill'，函数（d，i）{
返回i<4种颜色[i%colors.length]：“无”；
})
.attr（“d”，行）；
svg.selectAll（“.line”）
.attr（'stroke'，函数（d，i）{
返回i>=4种颜色[i%colors.length]：“无”；
});
函数amagar（a）{
if（d3.select（svg.selectAll（'.line'）[0][a]）.attr（“填充”）！=“无”）{
d3.select（svg.selectAll（'.line'）[0][a]）.attr（“填充”、“无”）；
}
其他的
d3.select（svg.selectAll（'.line'）[0][a]）.attr（“填充”，颜色[a%colors.length]）；
}
功能性无腺体（a）{
if（d3.select（svg.selectAll（'.line'）[0][a]）.attr（“笔划”）！=“无”）
d3.select（svg.selectAll（'.line'）[0][a]）.attr（“笔划”、“无”）；
其他的
d3.select（svg.selectAll（'.line'）[0][a]）.attr（“笔划”，颜色[a%colors.length]）；
}
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；

您可以为记号添加第二组轴函数，为栅格添加另一组轴函数

查看d3文档。你想要的是“滴答声”

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);