Question

我正在使用本教程Making a cool Bitcoin price chart using D3.js and the CryptoCompare API，但无法对绘制的线条进行样式设置。

例如，我希望能够选择x和y线并设置其样式以将其颜色更改为白色。请参见教程中的以下代码段：

var x = d3.scaleTime() .range([0, width])

我尝试添加.attr("fill", "#fff")，但这只会破坏它。如何更改d3.scaleTime()和d3.scaleLinear()的颜色？

我还按照d3-scale文档中所述尝试了以下方法：

var x = d3.scaleTime()
    .range([0, width])

x(20); // "#9a3439"

这是整个脚本：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <svg width="960" height="500"></svg>
  </head>

    <style>

      body {
        text-align: center;
        margin-top: 5em;
        background-color: #74b9ff;
      }

      h1 {
        color: snow;
      }


    </style>


    <body>
    <h1>Bitcoin Prices in U.S. Dollars</h1>
    <script>


  var url = "https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=200&aggregate=3&e=CCCAGG";


  d3.json(url).get(function(error, d) {

    var data = d.Data;
    data.forEach(function(d){ d.time = new Date(d.time * 1000) });

    if (error) throw error;

    var svg = d3.select("svg"),
        margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var x = d3.scaleTime()
        .range([0, width])

    var y = d3.scaleLinear()
        .range([height, 0]);

    var line = d3.line()
        .x(function(d) { return x(d.time); })
        .y(function(d) { return y(d.close); });

    x.domain(d3.extent(data, function(d) { return d.time; }));
    y.domain(d3.extent(data, function(d) { return d.close; }));

    g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .attr("stroke-width", 2)
        .attr("fill", "none")
        .style("font-size",".8em");

    g.append("g")
        .call(d3.axisLeft(y))
        .attr("stroke-width", 2)
        .style("font-size",".8em")
      .append("text")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("y", 20)
        .attr("text-anchor", "end")
        .attr("font-size", "1.2em")
        .text("Price ($)")


    g.append("path")
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "#ffeaa7")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 2)
        .attr("d", line);

  });

    </script>
  </body>
</html>

Answer 1

您可以如下所示设置轴的样式。

var xAxis = g.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x)); 

xAxis.select("path") //Axis 
    .style("stroke","white");

xAxis.selectAll("line") //ticks
    .style("stroke","white");

var yAxis = g.append("g")
    .call(d3.axisLeft(y));        

 yAxis.append("text")
    .attr("fill", "#000")
    .attr("transform", "rotate(-90)")
    .attr("y", 20)
    .attr("text-anchor", "end")
    .attr("font-size", "1.2em")
    .text("Price ($)");

yAxis.select("path") //Axis 
    .style("stroke","white");

yAxis.selectAll("line") //ticks
    .style("stroke","white");

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>

  <script src="https://d3js.org/d3.v4.min.js"></script>
  <svg width="960" height="500"></svg>
</head>

<style>
  body {
    text-align: center;
    margin-top: 5em;
    background-color: #74b9ff;
  }
  
  h1 {
    color: snow;
  }
</style>


<body>
  <h1>Bitcoin Prices in U.S. Dollars</h1>
  <script>
    var url = "https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=200&aggregate=3&e=CCCAGG";


    d3.json(url).get(function(error, d) {

      var data = d.Data;
      data.forEach(function(d) {
        d.time = new Date(d.time * 1000)
      });

      if (error) throw error;

      var svg = d3.select("svg"),
        margin = {
          top: 20,
          right: 20,
          bottom: 30,
          left: 50
        },
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var x = d3.scaleTime()
        .range([0, width])

      var y = d3.scaleLinear()
        .range([height, 0]);

      var line = d3.line()
        .x(function(d) {
          return x(d.time);
        })
        .y(function(d) {
          return y(d.close);
        });

      x.domain(d3.extent(data, function(d) {
        return d.time;
      }));
      y.domain(d3.extent(data, function(d) {
        return d.close;
      }));

      var xAxis = g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .attr("stroke-width", 2)
        .attr("fill", "none")
        .style("font-size", ".8em")

      xAxis.select("path") //Axis 
        .style("stroke", "white");

      xAxis.selectAll("line") //ticks
        .style("stroke", "white");

      var yAxis = g.append("g")
        .call(d3.axisLeft(y))
        .attr("stroke-width", 2)
        .style("font-size", ".8em");

      yAxis.append("text")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("y", 20)
        .attr("text-anchor", "end")
        .attr("font-size", "1.2em")
        .text("Price ($)");

      yAxis.select("path") //Axis 
        .style("stroke", "white");

      yAxis.selectAll("line") //ticks
        .style("stroke", "white");


      g.append("path")
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "#ffeaa7")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 2)
        .attr("d", line);

    });
  </script>
</body>

</html>

Answer 2

虽然Gilsha的答案似乎是最佳实践，并且可以更直接地控制样式，但从中得到的答案是使用selectAll()选择并设置每个“路径”（轴），“线”（刻度）的样式以及“文本”（显示价格和日期）。

在函数d3.json(url).get(function(error, d)的末尾包含以下内容将所有样式设置为白色：

g.selectAll("path") //Axes 
    .style("stroke","white");

g.selectAll("line") //Ticks
    .style("stroke","white");

g.selectAll("text") //Text displaying date and price 
    .attr("fill", "white");

请注意，这种广泛的方法也包括绘制数据线的路径。如果需要区分它们，则可以为此定义一个变量，并像Gilsha对轴所做的那样独立设置其样式。

如何使用svg更改d3中绘制的线条的颜色？

2 个答案: