javascript - 用字母数字字符标记轴-6ren

javascript - 用字母数字字符标记轴

转载作者：行者123 更新时间：2023-11-28 10:59:42

25

4

考虑代码index.html

<!DOCTYPE html>
<html>
  <head>
    <title>D3 test</title>
          <style>

       .grid .tick {
stroke: lightgrey;
        opacity: 0.7;
   }
      .grid path {
stroke-width: 0;
 }
  .chart {
     }
    .main text {
   font: 10px sans-serif;
 }
    .axis line, .axis path {
shape-rendering: crispEdges;
stroke: black;
fill: none;
    }
    circle {
fill: steelblue;
      }



     </style>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js">   

                    </script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
  </head>
  <body>
    <div class='content'>
      <!-- /the chart goes here -->
    </div>

   <script type="text/javascript" src="scatterchart.js"></script>

  </body>
</html>

和脚本如下的scatterchart.js

var color = d3.scale.ordinal().range(["#b41f2d", "#ff7f0e"]);

     var data = [

[2,2],
[3,3],

[4,4],
[5, 4],
[5.5, 5],
[6, 6],
[6, 7],

[6.5,8],
[6.5,16],

[17, 16]
 ];

var margin = {
top: 20,
right: 15,
bottom: 60,
left: 25
   }, width = 950 - margin.left - margin.right,
height = 480 - margin.top - margin.bottom;

    var x = d3.scale.linear()
.domain([0, d3.max(data, function (d) {
return d[0];
   })])
 .range([0, width]);

  var y = d3.scale.linear()
.domain([0, d3.max(data, function (d) {
return d[1];
 })])
//.range([height, 0]) //flip y
.range([0, height]);

      var chart = d3.select('body')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart');

    var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
.attr('class', 'main');

   // draw the x axis
 var xAxis = d3.svg.axis()
.scale(x)
  //.orient('bottom')
.orient('top'); // adjust ticks to new x axis position

    main.append('g')
//.attr('transform', 'translate(0,' + height + ')')
.attr('transform', 'translate(0,0)') // move x axis up
.attr('class', 'main axis date')
.call(xAxis);

     // draw the y axis
  var yAxis = d3.svg.axis()
.scale(y)
.orient('left');

 main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis);

  var g = main.append("svg:g");

  g.selectAll("scatter-dots")
  .data(data)
.enter().append("svg:circle")
.attr("cx", function (d, i) {
return x(d[0]);
 }) 
 .attr("cy", function (d) {
return y(d[1]);
 }) 
.attr("r", 5)
.style("fill", function (d) { return color(d[0]);}) ;

     // begin of drawing lines
 var line = d3.svg.line()
.x(function(d){return x(d[0]);})
.y(function(d){return y(d[1]);})
.interpolate("linear");  

 g.append("path")
.attr("d", function(d) { return line(data)})
.attr("transform", "translate(0,0)")
.style("stroke-width", 2)
        .style("stroke", "steelblue")
        .style("fill", "none");
  // end of drawing lines

   main.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""))

      main.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat(""))

  function make_x_axis() {
return d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(30)
  }

   function make_y_axis() {
return d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(17)
  }

在此示例中，如何将 x 轴标记为 x1、x2、x3……等等，而不是 0、1、2……以及将 y 轴标记为 y1、y2、y3…… . 等等而不是 0,1,2,?

最佳答案

你可以使用 axis.tickFormat定义一个简单的自定义格式化程序。这是 x 轴的示例:

axis.tickFormat(function(d) {
    return "x" + d;
});

关于javascript - 用字母数字字符标记轴，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22511072/

25

4

0

文章推荐： php - 使用 for 语句 PHP 保持在线发布号码

文章推荐： html - HTML 电子邮件中显示的图像轮廓

文章推荐： javascript - Opera 和 IE8 中 AJAX 调用失败

文章推荐： javascript - 单击按钮时关闭模态窗体并打开一个新窗体

javascript - 正则表达式匹配字符/数字/数字/数字
fiddle :http://jsfiddle.net/rtucgv74/ 我正在尝试将第一个字符与 3 位数字匹配。所以下面的代码应该提醒f234。但反而返回 null ？源代码: var reg
asp正则表达式匹配数字$数字$数字$
复制代码代码如下: Dim strOk,strNo strOk = "12312321$12
c#数字/数字/字符串模式的正则表达式
我想找 {a number} / { a number } / {a string}模式。我可以得到number / number工作，但是当我添加 / string它不是。我试图找到的例子: 15
java - 数字.数字.数字的模式表达式？
我，我正在做一个模式正则表达式来检查字符串是否是: 数字.数字.数字，如下所示: 1.1.1 0.20.2 58.55541.5221 在java中我使用这个: private static Patt
python - 检查字符串是否包含python中的数字/数字/数字
我有一个字符串，我需要检查它是否在字符串的末尾包含一个数字/数字，并且需要将该数字/数字递增到字符串末尾 +1 我会得到下面的字符串 string2 = suppose_name_1 string3
java - (数字/数字)的正则表达式
我正在寻找一个正则表达式 (数字/数字)，如(1/2) 数字必须是 1-3 位数字。我使用 Java。我认为我的问题比正则表达式更深。我无法让这个工作 String s ="(1/15)";
typescript [数字，数字]与数字[]
谁能帮我理解为什么我在使用以下代码时会出现类型错误: function sumOfTwoNumbersInArray(a: [number, number]) { return a[0] +
google-apps-script - Apps 脚本错误 : Cannot find method getRange(number, 数字、数字、数字)
我看到有些人过去也遇到过类似的问题，但他们似乎只是不同，所以解决方案也有所不同。所以这里是: 我正在尝试在 Google Apps 脚本中返回工作表的已知尺寸范围，如下所示: var myRange
Python - 如何将此模式(数字/数字)与正则表达式匹配？
我试图了解python中的正则表达式模块。我试图让我的程序从用户输入的一行文本中匹配以下模式: 8-13 之间的数字“/” 0-15 之间的数字例如:8/2、11/13、10/9 等。我想出的模式
java - 如何将扫描仪输入拆分为(数字)(带空格的字符串)(数字)
简单地说，我当前正在开发的程序要求我拆分扫描仪输入(例如:2 个火腿和奶酪 5.5)。它应该读取杂货订单并将其分成三个数组。我应该使用 string.split 并能够将此输入分成三部分，而不管中间字
c++ - (数字)和(-数字)的含义
(number) & (-number) 是什么意思？我已经搜索过了，但无法找到含义我想在 for 循环中使用 i & (-i)，例如: for (i = 0; i 110000 .对于i没有高于
javascript - 数字 = parseInt(数字);需要从 rel 属性中获取非数字
需要将图像ID设置为数字 var number = $(this).attr('rel'); number = parseInt(number); $('#carousel .slid
typescript - Typescript 可以确保数组具有重复的类型模式吗？例如[字符串，数字，字符串，数字，....(永远)]
我有一个函数，我想确保它接受一个字符串，后跟一个数字。并且可选地，更多的字符串数字对。就像一个元组，但“无限”次: const fn = (...args: [string, number] | [s
javascript - html 输入类型更改=数字 "available"值。还将更改另一个输入类型=数字 "Total"
我想复制“可用”输入数字的更改并将其添加或减去到“总计”中如果此人将“可用”更改为“3”，则“总计”将变为“9”。如果用户将“可用”更改为“5”，则“总计”将变为“11”。 $('#id1').b
r - 如何在 R 中的(字符/数字)和(字符/数字)类型之间进行换行
我有一个与 R 中的断线相关的简单问题。我正在尝试粘贴，但在获取(字符/数字)之间的断线时遇到问题。请注意，这些值包含在向量中(V1=81,V2=55,V3=25)我已经尝试过这段代码: cat(p
c++ - 数字 xor K - K = 数字 + K xor K，为什么？
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
angular - typescript 错误 "Argument of type ' 数字[ ]' is not assignable to parameter of type ' 数字'”
我在 Typescript 中收到以下错误: Argument of type 'number[]' is not assignable to parameter of type 'number' 我
JavaScript 数字
在本教程中，您将通过示例了解JavaScript 数字。在JavaScript中，数字是基本数据类型。例如， const a = 3; const b = 3.13; 与其他一些编程语言不同
JavaScript 数字
我在 MDN Reintroduction to JavaScript 上阅读JavaScript 数字只是浮点精度类型，JavaScript 中没有整数。然而 JavaScript 有两个函数，pa
Excel编程自动完成部分输入(数字)
我们在 Excel 中管理库存。我知道这有点过时，但我们正在发展商业公司，我们所有的钱都被困在业务上，没有钱投资 IT。所以我想知道我可以用Excel自动完成产品编号的方式进行编程吗？这是一个产品

首页

博学

6Ren·AI

商城

javascript - 用字母数字字符标记轴