d3.js 坐标轴设置

不念不忘少年蓝@ 2022-09-01 00:03 182阅读 0赞

常用代码：

# 一、定义坐标轴 #

// 数据
    var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];
    // 定义比例尺
    var linear = d3.scale.linear()
        .domain([0, d3.max(dataset)])
        .range([0, 250]);
    var axis = d3.svg.axis()
        .scale(linear)      // 指定比例尺
        .orient("bottom")   // 指定刻度的方向
        .ticks(7);          // 指定刻度的数量

*  d3.svg.axis()：D3 中坐标轴的组件，能够在 SVG 中生成组成坐标轴的元素。
 *  scale()：指定比例尺。
 *  orient()：指定刻度的朝向，bottom 表示在坐标轴的下方显示。
 *  ticks()：指定刻度的数量。
 *

# 二、SVG中添加坐标轴 #

svg.append("g")
      .attr("class","axis")  //绑定设置好的样式
      .attr("transform","translate(20,130)")   //偏移
      .call(axis);

# 三、设置坐标轴样式 #

<style>
    .axis path{
        //设置坐标轴整个长线的
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    },
    .axis line{
    //设置坐标轴长线上的小间隔短线
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }
    
    .axis text {
    //设置坐标轴文字
        font-family: sans-serif;
        font-size: 11px;
    }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关 D3.js（二）：比例尺、坐标轴、带有坐标轴的柱状图

比例尺 > 将`一个区间`的数据对应到`另一个区间` <table> <thead> <tr> <th>比例尺</th> <th>描述</th

电玩女神/ 2024年04月06日 10:04/ 0 赞/ 26 阅读

相关二、Matplotlib——坐标轴设置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MyOTQ4

迷南。/ 2023年08月17日 16:03/ 0 赞/ 96 阅读

相关 d3.js 坐标轴设置

常用代码：一、定义坐标轴 // 数据 var dataset = [2.5, 2.1, 1.7, 1.3, 0.9]; // 定义比例尺

不念不忘少年蓝@/ 2022年09月01日 00:03/ 0 赞/ 183 阅读

相关 matlab坐标轴设置

以下转载自：http://blog.sina.com.cn/s/blog\_6399df820100tr8x.html a=linspace(1,2,10) pl

痛定思痛。/ 2022年08月27日 13:53/ 0 赞/ 200 阅读

相关 Highcharts 设置坐标轴文字样式

![SouthEast][] ![SouthEast 1][] http://www.hcharts.cn/api/index.php\yAxis.labels.st

Bertha 。/ 2022年08月13日 10:28/ 0 赞/ 344 阅读

相关数据可视化2---3D坐标轴

import matplotlib.pyplot as plt import numpy as np import matplotlib as mpl

￡神魔★判官ぃ/ 2022年06月08日 13:18/ 0 赞/ 218 阅读

相关【D3.js】D3是什么

D3是什么 D3 的全称是 Data-Driven Document，可以理解为：由数据来决定绘图流程的程序设计模型。 D3 是一个JavaScript的函数库，是用来

忘是亡心i/ 2022年06月02日 07:18/ 0 赞/ 240 阅读

相关使用D3.js绘制顺化曲线图、坐标轴

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm

ゝ一纸荒年。/ 2022年04月18日 02:27/ 0 赞/ 453 阅读

相关 d3入门篇（三）：比例尺坐标轴

这篇文章继续介绍d3的基础知识比例尺在绘制柱状图时，我们往往会定义很大的画布，然而我们要可视化的数据确很小，这时会出现很多留白的情况。为了根据显示

悠悠/ 2022年03月02日 10:46/ 0 赞/ 299 阅读

相关 Unity3D 字体设置

Unity支持所有的 .ttf 的字符集，默认的字体为Arial 设置其它字体前，需要得到一个 .ttf 的字符集，获取的方法很多，可以在网上下载，或者复制本机电脑中的字符集

偏执的太偏执、/ 2021年11月09日 02:26/ 0 赞/ 964 阅读