堆棧內存溢出
  簡體   English   中英

更改y軸上刻度的大小並在D3.js中添加圖例

[英]Changing size of ticks on y axis and adding legend in D3.js

 原文  2016-03-18 14:14:46  3   2    javascript/ d3.js

問題描述

我是D3新手，我想根據傳入的數據繪制多個圖。 在這里，我嘗試繪制其中之一，並將在同一頁面上再添加4個類似的內容。 以下是我到目前為止的代碼： 

var data = [
{"mytime": "2015-12-01T11:10:00.000Z", "value": 64},
{"mytime": "2015-12-01T11:15:00.000Z", "value": 67},
{"mytime": "2015-12-01T11:20:00.000Z", "value": 70},
{"mytime": "2015-12-01T11:25:00.000Z", "value": 64},
{"mytime": "2015-12-01T11:30:00.000Z", "value": 72},
{"mytime": "2015-12-01T11:35:00.000Z", "value": 75},
{"mytime": "2015-12-01T11:40:00.000Z", "value": 71},
{"mytime": "2015-12-01T11:45:00.000Z", "value": 80}
];


var margin = { top: 30, right: 30, bottom: 40, left:50 };

var height = 200 - margin.top - margin.bottom,
    width = 800 - margin.left - margin.right;

console.log("1")
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;
data.forEach(function(d) {
          d.mytime = parseDate(d.mytime);
        });

var x_extent = d3.extent(data, function(d){
    return d.mytime});
console.log("2")
var y_extent = d3.extent(data, function(d){
    return d.value});

var x_scale = d3.time.scale()
    .domain(x_extent)
    .range([0,width]);

console.log("3")

var y_scale = d3.scale.linear()
    .domain([0,y_extent[1]])
    .range([height,0]);



//Line
var lineGen = d3.svg.line()
    .x(function (d) {
        console.log(d.date)
        return x_scale(d.mytime);
    })
    .y(function (d) {
        return y_scale(d.value);
    });

var myChart = d3.select('body').append('svg')
                .style('background', '#E7E0CB')
                .attr('width', width + margin.left + margin.right)
                .attr('height', height + margin.top + margin.bottom)
                .append('g')
                .attr('transform', 'translate('+ margin.left +', '+ margin.top +')')
                .append('svg:path')
                .datum(data)
                .attr('class', 'line')
                .attr("d",lineGen)
                .attr("data-legend","pulse")
                .attr('stroke', 'green')
                .attr('stroke-width', 0.5)
                .attr('fill', 'none');





var vGuideScale = d3.scale.linear()
    .domain([0,y_extent[1]])
    .range([height, 0])

var vAxis = d3.svg.axis()
    .scale(vGuideScale)
    .orient('left')
//    .tickFormat("") //For removing values
    .ticks(5)
var vGuide = d3.select('svg').append('g')
    vAxis(vGuide)
    vGuide.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
    vGuide.selectAll('path')
        .style({ fill: 'none', stroke: "#000"})
    vGuide.selectAll('line')
        .style({ stroke: "#000"})

console.log("4")
d3.select('svg').append('g')
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y",6)
      .attr("x",-50)
      .attr("dy", ".51em")
      .attr("font-size", "10px")
      .style("text-anchor", "end")
      .attr("fill", "green")
      .text("Value");

console.log("5")
var hAxis = d3.svg.axis()
    .scale(x_scale)
    .orient('bottom')
    .ticks(d3.time.minute, 5);

var hGuide = d3.select('svg').append('g')
    hAxis(hGuide)
    hGuide.attr('transform', 'translate(' + margin.left + ', ' + (height + margin.top) + ')')
    hGuide.selectAll('path')
        .style({ fill: 'none', stroke: "#000"})
    hGuide.selectAll('line')
        .style({ stroke: "#000"})

我對代碼的格式幾乎沒有疑問：

  1. 當我嘗試以下鏈接時如何在代碼中添加圖例，但在使用調用函數http://bl.ocks.org/ZJONSSON/3918369時出現錯誤
  2. 如何減少y軸上的刻度線大小？

謝謝

2 個解決方案

解決方案1
 1 已采納  2016-03-18 18:00:59

答案是使用css來控制組件的樣式（包括字體大小）。 例如，對於SVG標簽中的所有字體： 

svg {
  font: 10px sans-serif;
}

其次，建立圖例可能非常簡單： 

var legend = myChart.append("g")
  .attr("class", "legend")
  .attr("transform", "translate(" + 5 + "," + (height - 25) + ")")

legend.append("rect")
  .style("fill", "green")
  .attr("width", 20)
  .attr("height", 20);

legend.append("text")
  .text("My Awesome Legend Item")
  .attr("x", 25)
  .attr("y", 12);

完整代碼示例： 

 <!DOCTYPE html> <html> <head> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> <style> svg { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } </style> </head> <body> <script> var data = [{ "mytime": "2015-12-01T11:10:00.000Z", "value": 64 }, { "mytime": "2015-12-01T11:15:00.000Z", "value": 67 }, { "mytime": "2015-12-01T11:20:00.000Z", "value": 70 }, { "mytime": "2015-12-01T11:25:00.000Z", "value": 64 }, { "mytime": "2015-12-01T11:30:00.000Z", "value": 72 }, { "mytime": "2015-12-01T11:35:00.000Z", "value": 75 }, { "mytime": "2015-12-01T11:40:00.000Z", "value": 71 }, { "mytime": "2015-12-01T11:45:00.000Z", "value": 80 }]; var margin = { top: 30, right: 30, bottom: 40, left: 50 }; var height = 200 - margin.top - margin.bottom, width = 800 - margin.left - margin.right; console.log("1") var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse; data.forEach(function(d) { d.mytime = parseDate(d.mytime); }); var x_extent = d3.extent(data, function(d) { return d.mytime }); console.log("2") var y_extent = d3.extent(data, function(d) { return d.value }); var x_scale = d3.time.scale() .domain(x_extent) .range([0, width]); console.log("3") var y_scale = d3.scale.linear() .domain([0, y_extent[1]]) .range([height, 0]); //Line var lineGen = d3.svg.line() .x(function(d) { console.log(d.date) return x_scale(d.mytime); }) .y(function(d) { return y_scale(d.value); }); var myChart = d3.select('body').append('svg') .style('background', '#E7E0CB') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .append('g') .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); myChart .append('svg:path') .datum(data) .attr('class', 'line') .attr("d", lineGen) .attr("data-legend", "pulse") .attr('stroke', 'green') .attr('stroke-width', 0.5) .attr('fill', 'none'); var legend = myChart.append("g") .attr("class", "legend") .attr("transform", "translate(" + 5 + "," + (height - 25) + ")") legend.append("rect") .style("fill", "green") .attr("width", 20) .attr("height", 20); legend.append("text") .text("My Awesome Legend Item") .attr("x", 25) .attr("y", 12); var vGuideScale = d3.scale.linear() .domain([0, y_extent[1]]) .range([height, 0]) var vAxis = d3.svg.axis() .scale(vGuideScale) .orient('left') // .tickFormat("") //For removing values .ticks(5) var vGuide = d3.select('svg').append('g').attr("class", "y axis") vAxis(vGuide) vGuide.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')') console.log("4") d3.select('svg').append('g') .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("x", -50) .attr("dy", ".51em") .attr("font-size", "10px") .style("text-anchor", "end") .attr("fill", "green") .text("Value"); console.log("5") var hAxis = d3.svg.axis() .scale(x_scale) .orient('bottom') .ticks(d3.time.minute, 5); var hGuide = d3.select('svg').append('g').attr("class", "x axis") hAxis(hGuide) hGuide.attr('transform', 'translate(' + margin.left + ', ' + (height + margin.top) + ')') </script> </body> </html>

解決方案2
 0  2016-03-18 16:12:45

您可以通過tickSize設置器控制刻度線的長度，如下所示： 

var axis = d3.svg.axis()
    .scale(scale)
    .orient("right")
    .ticks(2)
    .tickSize(10)
    .tickFormat(formatPercent);

接着： 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用 d3.js 查找 y 軸刻度的位置 D3.js多個y軸具有相同的刻度位置？ 在d3.js多y軸圖中重新調整軸刻度和文本 d3.js 軸刻度顯示錯誤 將數據綁定到軸刻度d3.js d3.js縮放比例，軸和自定義刻度 d3.js使軸刻度可點擊 將圖像作為軸刻度在d3.js中 如何在 D3.js 版本 7 上將 Y 軸刻度從 45.000.000 修改為 45M？ D3.js y 軸刻度線和網格線不對齊
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM