javascript - 更改 y 轴上刻度的大小并在 D3.js 中添加图例-6ren

javascript - 更改 y 轴上刻度的大小并在 D3.js 中添加图例

转载作者：行者123 更新时间：2023-12-03 07:23:53

我是新的 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"})

我对代码的格式没有什么疑问:

当我尝试以下链接但在使用调用函数时遇到错误时，如何向代码添加图例 http://bl.ocks.org/ZJONSSON/3918369
如何减少 y 轴上的刻度大小？

谢谢

最佳答案

这里的答案是使用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>

关于javascript - 更改 y 轴上刻度的大小并在 D3.js 中添加图例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36086656/

文章推荐： javascript - 卡住标题不允许点击 knockout

文章推荐： javascript - 在 javascript(或 jquery)中重新映射 Control + S 按钮

文章推荐： javascript - 如何给jquery加载div添加定时器？

文章推荐： javascript - HTML javascript 动态调整表格大小

c - 大小(数组)/大小(整数)
这个问题在这里已经有了答案: C sizeof a passed array [duplicate] (7 个回答) 8年前关闭。在一个函数中，我声明了一个数组: int char_count_ar
linux - 为什么文件系统有自己的 block 大小，而不是使用硬盘 block 大小？
简而言之，文件系统如何与 block 设备通信？最佳答案我对 block 大小不太了解。我认为 ext4(Linux)的文件系统的 block 大小是 4KB，考虑到现代处理器的页面大小(4KB)
mysql - tinyint(大小)，varchar(大小): "size" explaination
我知道 tinyint(1) 和 tinyint(2) 具有相同的存储空间范围。唯一的区别是显示宽度不同。这是否意味着 tinyint(1) 将存储所有类型的整数但只正确显示 0 到 9 的范围？而
c++ - 大小 8 的无效读取，大小 8 的无效写入 (Valgrind)
今晚我已经研究了以下代码几个小时，但我只是摸不着头脑。当使用函数从标准输入填充数组时，我不断收到“大小 8 的无效写入”和“大小 8 的无效读取”。如有任何帮助，我们将不胜感激...我知道 Sta
c - 大小 8 的无效读取，大小 8 的无效写入，C
我有一个 valgrind 错误，我不知道如何摆脱它们: ==5685== Invalid read of size 8 ==5685== at 0x4008A1: main (in /home
Hadoop block 大小 vs 拆分 vs block 大小
我对 Hadoop 的概念有点困惑。 Hadoop block 大小、拆分大小和 block 大小之间有什么区别？提前致谢。最佳答案 block 大小和 block 大小相同。拆分大小可能与
javascript - 超过 localStorage 配额(localStorage 大小!= 文件下载大小)& 如何检查 localStorage 大小
我想不出一个好的标题，所以希望可以。我正在做的是创建一个离线 HTML5 webapp。 “出于某些原因”我不希望将某些文件放在缓存 list 中，而是希望将内容放在 localStorage 中。
xamarin - 减少 Xamarin.Forms 中的 APK 大小，APK 大小 80MB
无法将 xamarin apk 大小减少到 80 MB 以下，已执行以下操作: 启用混淆器配置:发布平台:事件(任何 CPU)。启用 Multi-Dex:true 启用开发人员检测(调试和分析)
python - 读取多个 csv 文件(大小 mxm)并加载为 n 维数组(大小 nxmxm)(不连接)
我正在开发一个程序，需要将大量 csv 文件(数千个)加载到数组中。 csv 文件的尺寸为 45x100，我想创建一个尺寸为 nx45x100 的 3-d 数组。目前，我使用 pd.read_csv(
react-native - Flutter apk/ipa 大小 vs React Native apk/ipa 大小
Hello World 示例的 React Native APK 大小约为 20M (in recent versions)，因为支持不同的硬件架构(ARMv7、ARMv8、X86 等)，而同一应用程
python - 将 n 个元素(大小 = 2 字节，十进制)的列表拆分为 2n 个元素(大小 = 1 字节，十六进制)
我有一个包含 n 个十进制元素的列表，其中每个元素都是两个字节长。可以说: x = [9000 , 5000 , 2000 , 400] 这个想法是将每个元素拆分为 MSB 和 LSB 并将其存储在
GtkTextView 大小
如何设置 GtKTextView 的大小？我想我不能使用 gtk_widget_set_usize。最佳答案您不能直接控制小部件的大小，而是由其容器完成。您可以使用 gtk_widget_set_
具有函数的结构的c++大小
这个问题在这里已经有了答案: c++ sizeof() of a class with functions (7 个答案) 关闭 5 年前。结果是 12。 foobar 函数存储在内存中的什么位置
image - 为什么图像序列比源视频大(大小)？
当我在 ffmpeg(或任何其他程序)中使用这样的命令时: ffmpeg -i input.mp4 image%d.jpg 所有图像的组合文件大小总是比视频本身大。我尝试减少每秒帧数、降低压缩设置、模
clojurescript 高级编译 - 大小
我是 clojurescript 的新手。高级编译后出现“77 KB”的javascript文件是否正常？我有一个 clojurescript 文件: 我正在使用 leinigen: lein c
Qt QPixmap 大小
我想要一个 QPixmap尺寸为 50 x 50。我试过 : QPixmap watermark(QSize(50,50)); watermark.load(":/icoMenu/preparati
卷积层的 tensorflow 大小
我正在尝试从一篇研究论文中重新创建一个 cnn，但我对深度学习还是个新手。我得到了一个大小为 32x32x7 的 3d 补丁。我首先想执行一个大小为 3x3 的卷积，具有 32 个特征和步幅为 2。
iPhone如何在旋转设备时正确调整 View 大小
我一直在尝试调整 View Controller 内的 View 大小，但到目前为止没有运气。基本上，我的 View 最底部有一个按钮，当方向从纵向更改为横向时，该按钮不再可见，因为它现在太靠下了。
javascript - 上传前检查图像尺寸/大小
如何使用此功能检查图像的尺寸？我只是想在上传之前检查一下... $("#LINK_UPLOAD_PHOTO").submit(function () { var form = $(this);
二叉搜索树上的 JavaScript 大小
我用 C++ 完成了这个，因为你可以通过引用传递参数。我无法弄清楚如何在 JavaScript 中执行此操作。我的代码需要更改什么？我的输出是1 this.sizeOfBst = function()

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 更改 y 轴上刻度的大小并在 D3.js 中添加图例