如何在 Plottable.js 中的 y 轴上添加水平线

Question

我在 JavaScript 的 Plottable.js 中有以下运行代码。

var data = [{ x: 1, y: 1 }, { x: 2, y: 3 }, { x: 3, y: 2 },
            { x: 4, y: 4 }, { x: 5, y: 3 }, { x: 6, y: 5 }];

var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();
var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScale, "left");

var plot = new Plottable.Plots.Bar()
  .addDataset(new Plottable.Dataset(data))
  .x(function(d) { return d.x; }, xScale)
  .y(function(d) { return d.y; }, yScale)
  .animated(true);

 new Plottable.Components.Table([
            [null, null],
            [yAxis, plot],
            [null, xAxis]
        ]).renderTo("svg#example");
  
window.addEventListener("resize", function() {
  plot.redraw();
});

<!doctype html>
<html>
<head>

</head>




<body>
 

     <svg width="100%" height="100%" id="example"></svg>

    <!-- Act on the thing -->
    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>

    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>


</body>
</html>

如下图所示，如何修改我的 Javascript 代码，使其包含 y=2 处的水平线？

Answer 1

您可以使用 Plottable.Components.GuideLineLayer:

var data = [{ x: 1, y: 1 }, { x: 2, y: 3 }, { x: 3, y: 2 },
            { x: 4, y: 4 }, { x: 5, y: 3 }, { x: 6, y: 5 }];

var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();
var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScale, "left");

var plot = new Plottable.Plots.Bar()
  .addDataset(new Plottable.Dataset(data))
  .x(function(d) { return d.x; }, xScale)
  .y(function(d) { return d.y; }, yScale)
  .animated(true);
var guideline = new Plottable.Components.GuideLineLayer("horizontal")
        .scale(yScale);
guideline.value(2);

var plots = new Plottable.Components.Group([guideline, plot]);
 new Plottable.Components.Table([
            [null, null],
            [yAxis, plots],
            [null, xAxis]
        ]).renderTo("svg#example");
  
window.addEventListener("resize", function() {
  plot.redraw();
});

<!doctype html>
<html>
<head>

</head>




<body>
 

     <svg width="100%" height="100%" id="example"></svg>

    <!-- Act on the thing -->
    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>

    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>


</body>
</html>

如何在 Plottable.js 中的 y 轴上添加水平线

How to add horizontal line over y-axis in Plottable.js

html

javascript

d3.js

plottable