用javascript绘制简单的图表答案

【问题标题】：plot sipmle chart with javascript用javascript绘制简单的图表
【发布时间】：2017-04-04 20:57:38
【问题描述】：

我需要用 javascript 重现以下图表：

红点当然是可变的。

我尝试过使用 flot lib：

var d3 = [[7,7]];

    $.plot("#placeholder", [{
        data: d3,
        points: { show: true }
    }], {
xaxis:
{
  min:-15, max: 15,  tickSize: 5
},

yaxis:
{
    min:-15, max: 15,  tickSize: 5
}
});

结果：

x 轴未居中... 我正在寻找一种更好的方法来优化它，就像我的第一个图像一样，js lib 来做到这一点。谢谢

【问题讨论】：

下面是一个带有 JSFIDDLE 的 D3 库的示例来测试它。

标签： javascript html plot charts draw

【解决方案1】：

不仅仅是一个库，也许这对你有用？

HTML：

<div id="graph"></div>

CSS：

#graph
{
  margin; 0 auto;
}

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

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

.tick line
{
  stroke: #59ADEB;
  opacity: 0.5;
}

g path.domain
{
  stroke: #4F4F4F;
}

JavaScript：

// Set graph
    var width = 700,
            height = 700,
            padding = 100;

    // create an svg container
    var vis = d3.select("#graph")
    .append("svg:svg")
        .attr("width", width)
        .attr("height", height);

    var xScale = d3.scale.linear().domain([10, -10]).range([width - padding, padding]);
    var yScale = d3.scale.linear().domain([-10, 10]).range([height - padding, padding]);

    // define the y axis
    var yAxis = d3.svg.axis()
            .orient("left")
            .scale(yScale);

    // define the y axis
    var xAxis = d3.svg.axis()
            .orient("bottom")
            .scale(xScale);

    var xAxisPlot = vis.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + (height/2) + ")")
            .call(xAxis.tickSize(-height, 0, 0));

    var yAxisPlot = vis.append("g")
        .attr("class", "axis axis--y")
        .attr("transform", "translate("+ (width/2) +",0)")
        .call(yAxis.tickSize(-width, 0, 0));


    xAxisPlot.selectAll(".tick line")
        .attr("y1", (width - (2*padding))/2 * -1)
        .attr("y2", (width - (2*padding))/2 * 1);

    yAxisPlot.selectAll(".tick line")
        .attr("x1", (width - (2*padding))/2 * -1)
        .attr("x2", (width - (2*padding))/2 * 1);

https://jsfiddle.net/szx1eq99/
使用 d3 库。

【讨论】：

我收到以下错误：TypeError: d3.scale is undefined[Learn More]
你包含了 d3 库吗？
我试过：https://d3js.org/d3.v3.js，它正在工作。好像3d的v4版本不知道什么是scale。我怎样才能画出红点？ :) 谢谢
任何，例如 4,5？
jsfiddle.net/szx1eq99/1 勾选此项，如果对您有帮助，请将上面的答案标记为答案！忘了提这是旧代码，这就是为什么新版本中不存在规模的原因..

【解决方案2】：

如果您正在寻找一个库，D3JS 拥有几乎所有人类已知的图形样式。

【讨论】：

谢谢，但我在图库中找不到像我的图表这样的简单示例 :)