Question

我将轴添加到干线图有问题。我在版本3中使用D3.js。我绘制自己的由圆和线组成的茎。

我有两种情况：

1。
1.1首先我添加了茎 1.2然后我添加轴

Y轴绘制在茎上。在下图中，洋红色线覆盖绿色（我希望相反，茎应覆盖轴）

2
2.1首先我添加轴
2.2然后我添加了茎

没有绘制茎线。

我需要有人来解释为什么不画线。

档案js/stem-functions.js

var svgParams = {
  // Graph field
  graphWidth  : 200,
  graphHeight : 120,
  // Margins
  leftPadding  : 30,
  rightPadding : 10,
  upPadding    : 15,
  downPadding  : 25,
}

function setParametersSvg() {
  // Size of the SVG object
  this.svgWidth  = this.graphWidth  + this.leftPadding + this.rightPadding;
  this.svgHeight = this.graphHeight + this.upPadding   + this.downPadding;
}

setParametersSvg.apply(svgParams);

// Create Scale functions

var xScale = (function ustawSkaleX(minX, maxX, svgParam) {
  var xSc = d3.scale.linear()
    .domain([minX, maxX])
    .range([svgParam.leftPadding, svgParam.leftPadding + svgParam.graphWidth]);

  return xSc;
} (0, 5, svgParams) );


var yScale = (function ustawSkaleY(minY, maxY, svgParam) {
  var ySc = d3.scale.linear()
    .domain([minY, maxY])
    .range([svgParam.upPadding + svgParam.graphHeight, svgParam.upPadding]);   

  return ySc;
} (0, 0.5, svgParams) );


function addAxis(svg, svgParam, xScale, yScale) {
  // Functions drawing axis X
  var xAxis = d3.svg.axis();
  xAxis.scale(xScale) // Scale function for X
    .orient("bottom") // Location of label
    .ticks(7);        // Ticks

  // Add group 
  svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (svgParam.svgHeight - svgParam.downPadding) +")")
    .call(xAxis);

  // Functions drawing axis Y
  var yAxis = d3.svg.axis();
  yAxis.scale(yScale) // Scale function for Y
    .orient("left")   // Location of label
    .ticks(4);        // Ticks

  // Add group
  svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + (svgParam.leftPadding) + ", 0)")
    .call(yAxis);
}

function addStems(svg, dataset, xScale, yScale) {
  var circles = svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("fill", "green")
    .attr("cx", function(d) { return xScale(d.x); } )
    .attr("cy", function(d) { return yScale(d.n); } )
    .attr("r", 4);    

  var lines = svg.selectAll("line")
    .data(dataset)
    .enter()
    .append("line")
    .attr("class", "stem-line")
    .attr("stroke", "green")
    .attr("stroke-width", "1")
    .attr("x1", function(d) { return xScale(d.x); } )
    .attr("x2", function(d) { return xScale(d.x); } )
    .attr("y1", function(d) { return yScale(0); } )
    .attr("y2", function(d) { return yScale(d.n); } );  
}

档案js/stem-examples.js

// Data set
var p = [ 
    { x: 0, n:  0.15 },
    { x: 1, n:  0.25 },
    { x: 2, n:  0.40 },
    { x: 3, n:  0.15 },
    { x: 4, n:  0.05 }
  ];

console.log('probabilities ', p);

d3.select("body").append("h4").html("Call Stems printing before Axis printing");

// Stems before Axis => Axis is over stem
var svg1 = d3.select("body")
  .append("svg")
  .attr("width", svgParams.svgWidth)
  .attr("height", svgParams.svgHeight);

addStems(svg1, p, xScale, yScale);

addAxis(svg1, svgParams, xScale, yScale);

d3.select("body").append("br");

d3.select("body").append("h4").html("Call Axis printing before Stems printing");

// Axis before Stems => stem lines are gone (why?)
var svg2 = d3.select("body")
  .append("svg")
  .attr("width", svgParams.svgWidth)
  .attr("height", svgParams.svgHeight);

addAxis(svg2, svgParams, xScale, yScale);

addStems(svg2, p, xScale, yScale);

档案css/styl.js

svg { border: teal 1px solid; }

.axis path, .axis line {
    fill: none; 
    stroke: magenta;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 12px;
    fill: DarkViolet;
}

档案index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Stem plot with axis</title>
    <link rel="stylesheet" href="css/styl.css">
  </head>
  <body>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js"></script>  <!-- V3 -->
    <!-- TODO: try version 4 of D3.js --> <!-- V4 -->
    <script src="js/stem-functions.js"></script>
    <script src="js/stem-examples.js"></script>
  </body>
</html>

Answer 1

首先附加轴然后是茎是正确的方法。问题不在于此。

问题是，当你这样做时......

var lines = svg.selectAll("line")
    .data(dataset)
    .enter()
    .append("line")
    //etc...

...您正在选择该SVG中已存在的行，并将数据绑定到它们。

<强>解决方案

这样做：

var lines = svg.selectAll(null)
    .data(dataset)
    .enter()
    .append("line")
    //etc...

要了解我选择null的原因，请在此处查看我的问题/答案：Selecting null: what is the reason of using 'selectAll(null)' in D3.js?

D3.js带轴的茎图

1 个答案: