LINUX.ORG.RU

История изменений

Исправление saufesma, (текущая версия) :

Задача решается достаточно просто

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatable" content="ie=edge">
    <title>Document</title>
  </head>
  <div id="container"></div>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
    <script type="module">
      // Curved line declaration
      const data = [{xpoint: 10, ypoint: 0.2},
		    {xpoint: 4, ypoint: 1},
		    {xpoint: 3, ypoint: 2},
		    {xpoint: 2, ypoint: 3},
		    {xpoint: 1, ypoint: 10}];
// Declare the chart dimensions and margins.
const width = 640;
const height = 400;
const marginTop = 20;
const marginRight = 20;
const marginBottom = 30;
const marginLeft = 40;

// Declare the x (horizontal position) scale.
      const x = d3.scaleLog()
	    .domain([0.2, 60])
    .range([marginLeft, width - marginRight]);

// Declare the y (vertical position) scale.
const y = d3.scaleLog()
    .domain([0.1, 100])
    .range([height - marginBottom, marginTop]);

  
      
  // Declare the line generator.
      const line = d3.line()
	.x((d) => x(d.xpoint))
	.y((d) => y(d.ypoint))
        .curve(d3.curveCatmullRom.alpha(0.5));
      
      
// Create the SVG container.
const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height);

// Add the x-axis.
svg.append("g")
    .attr("transform", `translate(0,${height - marginBottom})`)
    .call(d3.axisBottom(x));

// Add the y-axis.
svg.append("g")
    .attr("transform", `translate(${marginLeft},0)`)
    .call(d3.axisLeft(y));

  // Append a path for the line.
  svg.append("path")
    .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
    .attr("d", line(data));

 
    
// Append the SVG element.
container.append(svg.node());

</script>
</body>
</html>

Господа умники witaway, AntonI, peregrine , научитесь для начала читать и понимать, что написано. И вы увидите, что вы не тянете вопроса. Всё, что вы тут понаписали является пустой хернёй. Которая вызывает чувство брезгливости.

Исходная версия saufesma, :

Задача решается достаточно просто

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatable" content="ie=edge">
    <title>Document</title>
  </head>
  <div id="container"></div>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
    <script type="module">
      // Curved line declaration
      const data = [{xpoint: 10, ypoint: 0.2},
		    {xpoint: 4, ypoint: 1},
		    {xpoint: 3, ypoint: 2},
		    {xpoint: 2, ypoint: 3},
		    {xpoint: 1, ypoint: 10}];
// Declare the chart dimensions and margins.
const width = 640;
const height = 400;
const marginTop = 20;
const marginRight = 20;
const marginBottom = 30;
const marginLeft = 40;

// Declare the x (horizontal position) scale.
      const x = d3.scaleLog()
	    .domain([0.2, 60])
    .range([marginLeft, width - marginRight]);

// Declare the y (vertical position) scale.
const y = d3.scaleLog()
    .domain([0.1, 100])
    .range([height - marginBottom, marginTop]);

  
      
  // Declare the line generator.
      const line = d3.line()
	.x((d) => x(d.xpoint))
	.y((d) => y(d.ypoint))
        .curve(d3.curveCatmullRom.alpha(0.5));
      
      
// Create the SVG container.
const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height);

// Add the x-axis.
svg.append("g")
    .attr("transform", `translate(0,${height - marginBottom})`)
    .call(d3.axisBottom(x));

// Add the y-axis.
svg.append("g")
    .attr("transform", `translate(${marginLeft},0)`)
    .call(d3.axisLeft(y));

  // Append a path for the line.
  svg.append("path")
    .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
    .attr("d", line(data));

 
    
// Append the SVG element.
container.append(svg.node());

</script>
</body>
</html>

Господа умники witaway, AntonI, peregrine , научитесь для начала читать и понимать, что написано. И вы увидите, что вы не тянете вопроса. Всё, что вы тут понаписали является пустой хернёй.