Как заменить числовые значения оси X (годы) на собственные метки в D3.js для этого примера? - PullRequest
Новая
       70

Как заменить числовые значения оси X (годы) на собственные метки в D3.js для этого примера?

0 голосов
/ 21 марта 2019

Я новичок в D3.Js, я нашел ниже пример солнечных лучей с линейным графиком, я смог его использовать.

http://bl.ocks.org/wizicer/raw/f662a0b04425fc0f7489/

jsfiddle: Ссылка

Однако он отображает только значения года по оси X, но мне нужны пользовательские текстовые метки, такие как «Март 2019», Апрель 2019 »и т. Д. По умолчанию ось X

Можно ли заменить значения года (1999, 2000, 2001 и т. Д.), Как показано ниже, текстовыми метками? 

  var chart = {},
    rect = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 50
    },
    g = 500 - rect.left - rect.right,
    h = 400 - rect.top - rect.bottom,
    i = [1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013],
    j = d3.scale.linear().range([0, g]),
    k = d3.scale.linear().range([h, 0]),
    bottomtick = d3
        .svg
        .axis()
        .scale(j)
        .tickValues([1999, 2004, 2009, 2013])
        .tickFormat(d3.format(".0f"))
        .tickPadding(10)
        .tickSize(0)
        .orient("bottom"),

Формат исходных данных 

var skillsdata;
skillsdata = {
      "Skills": {
        "Server & WinForm": {
          "Protocol": {
            "Propose": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 30, 50, 50, 50],
            "USSD": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 60, 60, 50, 40, 30],
            "UAP": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 60, 70, 50, 30],
            "Socket Raw": [0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 50, 50, 50, 70, 80]
          },

Мои правки 

 var chart = {},
        rect = {
            top: 20,
            right: 20,
            bottom: 30,
            left: 50
        },
        g = 500 - rect.left - rect.right,
        h = 400 - rect.top - rect.bottom,
        j = d3.time.scale().domain([new Date("2014-01-01"), new Date("2016-06-01")]).range([0, 850]),
        k = d3.scale.linear().range([h, 0]),
        bottomtick = d3
            .svg
            .axis()
            .scale(j)
            .tickFormat(d3.time.format("%B %Y"))
            .tickPadding(10)
            .tickSize(0)
            .orient("bottom"),
        lefttick = d3
            .svg
            .axis()
            .scale(k)
            .tickSize(0)
            .tickPadding(10)
            .tickValues([20, 40, 60, 80, 100])
            .orient("left"),

1 Ответ

0 голосов
/ 21 марта 2019

Форматы времени, доступные в d3.v3, определены здесь в этом документе: https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md.

Я приложил фрагмент, чтобы показать, как мы можем его достичь, надеюсь, это полезно!Я считаю, что вы просто должны сделать: 

// tick-format:
.tickFormat(d3.time.format("%B %Y"))

//scale type
d3.time.scale()


var svg = d3.select("body")
  .append("svg")
  .attr("width", 900)
  .attr("height", 100)   
            
var xScale = d3.time.scale()
  .domain([new Date("2014-01-01"), new Date("2016-01-01")])
  .range([0, 850]);
        
var xAxis = d3.svg.axis()
.scale(xScale)
.tickFormat(d3.time.format("%B %Y"))
.orient("bottom");
  
svg.append("g").call(xAxis);
<script src="https://d3js.org/d3.v3.min.js"></script>
...