情节sipmle用JavaScript

图表我需要重现如下图使用javascript：情节sipmle用JavaScript

红点当然是可变的。

我试图与海军报的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可以做到这一点。谢谢

来源

2017-04-04 Zatla00

下面的示例使用JSFIDDLE来测试它的D3库。 – Konstantinos

不是只有lib，也许这适合你吗？

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库。

来源

2017-04-04 21:14:13 Konstantinos

我收到以下错误： 'TypeError：d3.scale is undefined [了解更多]' – Zatla00

你有没有包括d3图书馆？ – Konstantinos

yes与： '' – Zatla00

如果你正在寻找一个库，D3JS几乎所有人都知道的图形风格。

来源

2017-04-04 21:12:08

谢谢，但我找不到像我的图中的一个简单的例子:) – Zatla00

情节sipmle用JavaScript

回答

相关问题