fangj/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="app"></div>
<a href="https://github.com/xswei/d3js_doc" target="_blank">D3文档</a>

<script src="https://cdn.bootcss.com/react/15.5.4/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
   <script id="jsbin-javascript">
//文档 https://github.com/xswei/d3js_doc

var line = d3.line();
var data = [1,3,5,1,2,3];
//定义比例尺


var linearY = d3.scaleLinear()
      .domain([0, d3.max(data)])
      .range([250,0]);
var linearX = d3.scaleLinear()
      .domain([0, data.length])
      .range([0, 250]);
const points=data.map((d,idx)=>[linearX(idx),linearY(d)])

console.log(points)

var line = d3.line();
// var line = d3.line().curve(d3.curveCatmullRom.alpha(0.5));


var xAxis = d3.axisBottom(linearX)
    .tickValues([1, 1.4, 3, 5]);


const wave=line(points);
console.log(wave)

function gotRef(ref){
  console.log("got ref",ref);
  var svg=d3.select(ref).append("g")
    .attr("transform", "translate(0,250)")
  xAxis(svg)
}
const App=()=>{
  return (React.createElement("svg", {width: 300, height: 300, ref: gotRef},
  React.createElement("path", {class: "domain", stroke: "#000", fill: "none", d: wave})
  ))
}

ReactDOM.render(
  React.createElement(App, null),
  document.getElementById('app')
);
</script>


<script id="jsbin-source-javascript" type="text/javascript">//文档 https://github.com/xswei/d3js_doc

var line = d3.line();
var data = [1,3,5,1,2,3];
//定义比例尺


var linearY = d3.scaleLinear()
      .domain([0, d3.max(data)])
      .range([250,0]);
var linearX = d3.scaleLinear()
      .domain([0, data.length])
      .range([0, 250]);
const points=data.map((d,idx)=>[linearX(idx),linearY(d)])

console.log(points)

var line = d3.line();
// var line = d3.line().curve(d3.curveCatmullRom.alpha(0.5));


var xAxis = d3.axisBottom(linearX)
    .tickValues([1, 1.4, 3, 5]);


const wave=line(points);
console.log(wave)

function gotRef(ref){
  console.log("got ref",ref);
  var svg=d3.select(ref).append("g")
    .attr("transform", "translate(0,250)")
  xAxis(svg)
}
const App=()=>{
  return (<svg width={300} height={300} ref={gotRef}>
  <path class="domain" stroke="#000" fill="none" d={wave}/>
  </svg>)
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);</script></body>
</html>

## jsbin.jedojub.js
//文档 https://github.com/xswei/d3js_doc

var line = d3.line();
var data = [1,3,5,1,2,3];
//定义比例尺


var linearY = d3.scaleLinear()
      .domain([0, d3.max(data)])
      .range([250,0]);
var linearX = d3.scaleLinear()
      .domain([0, data.length])
      .range([0, 250]);
const points=data.map((d,idx)=>[linearX(idx),linearY(d)])

console.log(points)

var line = d3.line();
// var line = d3.line().curve(d3.curveCatmullRom.alpha(0.5));


var xAxis = d3.axisBottom(linearX)
    .tickValues([1, 1.4, 3, 5]);


const wave=line(points);
console.log(wave)

function gotRef(ref){
  console.log("got ref",ref);
  var svg=d3.select(ref).append("g")
    .attr("transform", "translate(0,250)")
  xAxis(svg)
}
const App=()=>{
  return (React.createElement("svg", {width: 300, height: 300, ref: gotRef},
  React.createElement("path", {class: "domain", stroke: "#000", fill: "none", d: wave})
  ))
}

ReactDOM.render(
  React.createElement(App, null),
  document.getElementById('app')
);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="app"></div>
	<a href="https://github.com/xswei/d3js_doc" target="_blank">D3文档</a>

	<script src="https://cdn.bootcss.com/react/15.5.4/react.min.js"></script>
	<script src="https://cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script id="jsbin-javascript">
	//文档 https://github.com/xswei/d3js_doc

	var line = d3.line();
	var data = [1,3,5,1,2,3];
	//定义比例尺


	var linearY = d3.scaleLinear()
	.domain([0, d3.max(data)])
	.range([250,0]);
	var linearX = d3.scaleLinear()
	.domain([0, data.length])
	.range([0, 250]);
	const points=data.map((d,idx)=>[linearX(idx),linearY(d)])

	console.log(points)

	var line = d3.line();
	// var line = d3.line().curve(d3.curveCatmullRom.alpha(0.5));


	var xAxis = d3.axisBottom(linearX)
	.tickValues([1, 1.4, 3, 5]);


	const wave=line(points);
	console.log(wave)

	function gotRef(ref){
	console.log("got ref",ref);
	var svg=d3.select(ref).append("g")
	.attr("transform", "translate(0,250)")
	xAxis(svg)
	}
	const App=()=>{
	return (React.createElement("svg", {width: 300, height: 300, ref: gotRef},
	React.createElement("path", {class: "domain", stroke: "#000", fill: "none", d: wave})
	))
	}

	ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">//文档 https://github.com/xswei/d3js_doc

	var line = d3.line();
	var data = [1,3,5,1,2,3];
	//定义比例尺


	var linearY = d3.scaleLinear()
	.domain([0, d3.max(data)])
	.range([250,0]);
	var linearX = d3.scaleLinear()
	.domain([0, data.length])
	.range([0, 250]);
	const points=data.map((d,idx)=>[linearX(idx),linearY(d)])

	console.log(points)

	var line = d3.line();
	// var line = d3.line().curve(d3.curveCatmullRom.alpha(0.5));


	var xAxis = d3.axisBottom(linearX)
	.tickValues([1, 1.4, 3, 5]);


	const wave=line(points);
	console.log(wave)

	function gotRef(ref){
	console.log("got ref",ref);
	var svg=d3.select(ref).append("g")
	.attr("transform", "translate(0,250)")
	xAxis(svg)
	}
	const App=()=>{
	return (<svg width={300} height={300} ref={gotRef}>
	<path class="domain" stroke="#000" fill="none" d={wave}/>
	</svg>)
	}

	ReactDOM.render(
	<App />,
	document.getElementById('app')
	);</script></body>
	</html>