javascript - D3如何创建圆轴和样式选项

Question

我需要编写一个带有图表的简单应用程序，所以我选择了 D3。我还使用 ionic 框架来编码应用程序，并在 Controller 中实现了所有代码。它在应用程序中显示正确。我知道最好的做法是将其放入指令中，但我也没有成功地做到这一点。

但是我在学习 D3 时遇到了一些麻烦，我需要制作一个温度计，但最终得到了一个正方形。我遵循教程并尽力而为。有人可以帮我弄这个吗？它需要看起来像这样 therometer

代码:

   $scope.height = window.innerHeight - 110;
    /**
    * d3 code for the thermometer! d3 is a library for javascript and injected in the index.html in the www map.
    */

    //this is an array for the chart is using for the rectangle in the chart itself. it gets it data form the ChallengeService
var bardata = [$scope.challenge.amount];

    //this code is used to correctly show the axes of the chart.
var margin = {top: 30 , right: 30 , bottom: 40 , left: 50 };

    // these are values needed to drawn the chart correctly $scope.height is the ion-view - header bar - footer bar.
var height = $scope.height - margin.top - margin.bottom,
    width = 200 -  margin.left - margin.right,
    barWidth = 50,
    barOffset = 5,
    border = 5,
    bordercolor = '#F5F5F5';

    //used for the axis in scaling
var yScale = d3.scale.linear()
    .domain([0, 2184])
    .range([0, height]);

var xScale = d3.scale.ordinal()
    .domain(d3.range(0, bardata.length))
    .rangeBands([0, width])

    //this is the actual chart that gets drawn.
var myChart = d3.select('#chart').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .attr('id' , 'mijnsvg')
    .append('g')
    .attr('transform', 'translate(' +margin.left +','+margin.right +')')
    .selectAll('rect').data(bardata)
    .enter().append('rect')
    .style('fill', '#d0e4db')
    .attr('width', xScale.rangeBand())
    .attr('x', function(d,i) {
        return xScale(i);
    })
    //.attr('ry', 75)
    .attr('height', 0)
    .attr('y', height)
        //if they want a border this is the way keep in mind that it will shrink the graph and you need to adjust it when drawing!
    //.style("stroke", bordercolor)
    //.style("stroke-width", border)

    // used for how the chart is rendered this allows me to delay the drawing of the chart till the moment the users is on the tab.
myChart.transition()
    .attr('height', function(d) {
        return yScale(d);
    })
    .attr('y', function(d) {
        return height - yScale(d);
    })
    .delay(function(d, i) {
        return i * 50;
    })
    .duration(1300)
    .ease('exp')
    // theese are both axes being drawn
var vGuideScale1 = d3.scale.linear()
    .domain([0, 2184])
    .range([height, 0])

var vGuideScale2 = d3.scale.linear()
    .domain([0, 2184])
    .range([height, 0])

var vAxisLeft = d3.svg.axis()
    .scale(vGuideScale1)
    .orient('right')
    .ticks(5)
    .tickFormat(function(d){
      return '€ ' + parseInt(d);
    })

var vAxisRight = d3.svg.axis()
    .scale(vGuideScale2)
    .orient('right')
    // i use this in d3 to draw the right line otherwise it will fill in values.
    .ticks("")

var vGuide = d3.select('#mijnsvg').append('g')
    vAxisLeft(vGuide)
    vGuide.attr('transform', 'translate('+ margin.left+',' + margin.top+ ')')
    vGuide.attr('rx', 50)
    vGuide.selectAll('path')
        .style({ fill: '#368169', stroke: "#368169"})
    vGuide.selectAll('line')
        .style({ stroke: "#368169"})

var vGuideRight = d3.select('#mijnsvg').append('g')
    vAxisRight(vGuideRight)
    vGuideRight.attr('transform', 'translate('+ 164.5 + ',' + margin.top +')' )
    vGuideRight.selectAll('path')
        .style({ fill: '#368169', stroke: "#368169"})
    vGuideRight.selectAll('line')
        .style({ stroke: "#368169"})

var hAxis = d3.svg.axis()
    .scale(xScale)
    .orient('top')
    .tickValues('')

var hGuide = d3.select('#mijnsvg').append('g')
        hAxis(hGuide)
    hGuide.attr('transform', 'translate('+ margin.left+','  + margin.top + ')')
    hGuide.selectAll('path')
        .style({ fill: '#368169', stroke: "#368169"})
    hGuide.selectAll('line')
        .style({ stroke: "#368169"})
        .style('xr', 100)

Answer 1

我不使用圆 Angular 矩形，而是创建一个自定义路径生成器:

function roundedRect(w, x, d) { // width of bar, x position and datum value
  var arcHeight = 30; // height of arc
  var p = "";
  p += "M" + (x) + "," + (height); // move to lower left
  p += " L" + (x) + "," + (yScale(d) + arcHeight); // line up to start of arc
  p += " Q " + (w * 0.25) + "," + yScale(d) + " " + (w * 0.5 + x) + "," + yScale(d); // arc to center point
  p += " Q " + (w * 0.75 + x) + "," + yScale(d) + " " + w + "," + (yScale(d) + arcHeight); // arc to end
  p += " L" + w + "," + (height); // line down to bottom
  return p;
}

您可以使用它来绘制边框和“条”。

<小时/>

这是完整的工作代码。我稍微清理了轴并添加了一个 attrTween 函数，这样您仍然可以保留动画。

<!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>
    .axis path {
      display: none;
    }
    
    .axis line {
      stroke: #d0e4db;
    }
    
    line {
      shape-rendering: crispEdges;
    }
    
    .axis .tick line {
      stroke: #368169;
      stroke-dasharray: 2, 2;
      stroke-width: 4;
    }
    
    text {
      font-family: Verdana;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div id="chart"></div>
  <script>
    var $scope = {};

    $scope.height = 500;
    /**
     * d3 code for the thermometer! d3 is a library for javascript and injected in the index.html in the www map.
     */

    //this is an array for the chart is using for the rectangle in the chart itself. it gets it data form the ChallengeService
    var bardata = [1500];

    //this code is used to correctly show the axes of the chart.
    var margin = {
      top: 30,
      right: 30,
      bottom: 5,
      left: 50
    };

    // these are values needed to drawn the chart correctly $scope.height is the ion-view - header bar - footer bar.
    var height = $scope.height - margin.top - margin.bottom,
      width = 200 - margin.left - margin.right,
      barWidth = 50,
      barOffset = 5,
      border = 5,
      bordercolor = '#F5F5F5';

    //used for the axis in scaling
    var yScale = d3.scale.linear()
      .domain([0, 2184])
      .range([height, 0]);

    var xScale = d3.scale.ordinal()
      .domain(d3.range(0, bardata.length))
      .rangeBands([0, width])

    //this is the actual chart that gets drawn.
    var svg = d3.select('#chart').append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .attr('id', 'mijnsvg')
      .append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.right + ')');

    var myChart = svg
      .selectAll('rect').data(bardata)
      .enter().append('path')
      .style('fill', '#d0e4db');

    // used for how the chart is rendered this allows me to delay the drawing of the chart till the moment the users is on the tab.
    myChart.transition()
      .attrTween("d", function(d) {
        var interpolate = d3.interpolate(0, d);
        return function(t) {
          return roundedRect(xScale.rangeBand() - 15, 15, interpolate(t));
        }
      })
      .delay(function(d, i) {
        return i * 50;
      })
      .duration(1300)
      .ease('exp');

    var border = svg.append("g")
      .append("path")
      .attr("d", roundedRect(width, 0, 2184))
      .style("stroke", "#368169")
      .style("stroke-width", 6)
      .style("fill", "none");

    var yAxis = d3.svg.axis()
      .scale(yScale)
      .ticks(4)
      .tickSize(width / 2)
      .tickPadding(15)
      .orient("left");

    svg
      .append("g")
      .attr("transform","translate(" + width / 2 + ",0)")
      .attr("class", "y axis")
      .call(yAxis);

    function roundedRect(w, x, d) {
      var arcHeight = 30;
      var p = "";
      p += "M" + (x) + "," + (height);
      p += " L" + (x) + "," + (yScale(d) + arcHeight);
      p += " Q " + (w * 0.25 + x/2) + "," + yScale(d) + " " + (w * 0.5 + x/2) + "," + yScale(d);
      p += " Q " + (w * 0.75 + x/2) + "," + yScale(d) + " " + w + "," + (yScale(d) + arcHeight);
      p += " L" + w + "," + (height);
      return p;
    }
  </script>
</body>

</html>