¿Quieres arreglar de origen en la tabla D3? -- d3.js campo con charts camp Relacionados El problema

want to fixed origin in d3 chart


2
vote

problema

Español

Estoy tratando de arreglar el origen en un punto fijo. Quiero arreglar ambos ejes x y y 0 escala en un mismo punto para que cuando la tabla se actualice dinámicamente, se solucionará automáticamente. Lo he arreglado estáticamente ... Aquí está el enlace de violín

  var dataSet = [{ hour: 01, yval: 188, bar: "0", color: "red" },     { hour: 02, yval: 63, bar: "1", color: "deepskyblue" },     { hour: 14, yval: 241, bar: "0", color: "red" },     { hour: -15, yval: 241, bar: "3", color: "green" },     { hour: 19, yval: 241, bar: "0", color: "red" },     { hour: 22, yval: 318, bar: "3", color: "green" },     { hour: -08, yval: -118, bar: "1", color: "deepskyblue" },     { hour: 22, yval: -48, bar: "0", color: "red" },     { hour: 21, yval: 31, bar: "1", color: "deepskyblue" },     { hour: 12, yval: 38, bar: "0", color: "red" },     { hour: 16, yval: 138, bar: "3", color: "green" },     { hour: 05, yval: 344, bar: "1", color: "deepskyblue" },     { hour: 08, yval: 218, bar: "1", color: "deepskyblue" },     { hour: 03, yval: -18, bar: "0", color: "red" },     { hour: 18, yval: 78, bar: "3", color: "green" },     { hour: -18, yval: 98, bar: "1", color: "deepskyblue" } ];  var w = 500,     h = 500,     top_pad = 20,     left_pad = 100; var x = d3.scale.linear()     .domain([d3.min(dataSet, function(d) {         return d.hour;     }), d3.max(dataSet, function(d) {         return d.hour;     })])     .range([left_pad, w - left_pad]),     y = d3.scale.linear()     .domain([d3.min(dataSet, function(d) {         return d.yval;     }), d3.max(dataSet, function(d) {         return d.yval;     })])     .range([h - top_pad, top_pad]);   var svg = d3.select("body")     .append("svg:svg")     .attr("width", w + left_pad)     .attr("height", h + top_pad);  var symbolTypes = {     "triangleUp": d3.svg.symbol().type("triangle-up"),     "circle": d3.svg.symbol().type("circle"),     "diamond": d3.svg.symbol().type("diamond"), };   svg.selectAll("path")     .data(dataSet)     .enter().append("path")     .attr("class", "dot")     .attr("transform", function(d) {         return "translate(" + x(d.hour) + "," + y(d.yval) + ")";     })     .attr("d", function(d, i) {         if (d.bar === "0")             return symbolTypes.circle();         else if (d.bar === "1")             return symbolTypes.triangleUp();         else             return symbolTypes.diamond();     })     .style("fill", function(d) {         return d.color;     });   var xAxis = d3.svg.axis().scale(x).orient("bottom"),     yAxis = d3.svg.axis().scale(y).orient("left");  svg.append("g")     .attr("class", "axis")     .attr("transform", "translate(0, 362)")     .call(xAxis);  svg.append("g")     .attr("class", "axis")     .attr("transform", "translate( 221, 0)")     .call(yAxis);   

`

Original en ingles

I'm trying to fix origin on a fixed point. I want to fix both axis x and y 0 scale on a same point so that when chart dynamically update it'll fixed automatically. I've fixed it statically... here is fiddle link

var dataSet = [{ hour: 01, yval: 188, bar: "0", color: "red" },     { hour: 02, yval: 63, bar: "1", color: "deepskyblue" },     { hour: 14, yval: 241, bar: "0", color: "red" },     { hour: -15, yval: 241, bar: "3", color: "green" },     { hour: 19, yval: 241, bar: "0", color: "red" },     { hour: 22, yval: 318, bar: "3", color: "green" },     { hour: -08, yval: -118, bar: "1", color: "deepskyblue" },     { hour: 22, yval: -48, bar: "0", color: "red" },     { hour: 21, yval: 31, bar: "1", color: "deepskyblue" },     { hour: 12, yval: 38, bar: "0", color: "red" },     { hour: 16, yval: 138, bar: "3", color: "green" },     { hour: 05, yval: 344, bar: "1", color: "deepskyblue" },     { hour: 08, yval: 218, bar: "1", color: "deepskyblue" },     { hour: 03, yval: -18, bar: "0", color: "red" },     { hour: 18, yval: 78, bar: "3", color: "green" },     { hour: -18, yval: 98, bar: "1", color: "deepskyblue" } ];  var w = 500,     h = 500,     top_pad = 20,     left_pad = 100; var x = d3.scale.linear()     .domain([d3.min(dataSet, function(d) {         return d.hour;     }), d3.max(dataSet, function(d) {         return d.hour;     })])     .range([left_pad, w - left_pad]),     y = d3.scale.linear()     .domain([d3.min(dataSet, function(d) {         return d.yval;     }), d3.max(dataSet, function(d) {         return d.yval;     })])     .range([h - top_pad, top_pad]);   var svg = d3.select("body")     .append("svg:svg")     .attr("width", w + left_pad)     .attr("height", h + top_pad);  var symbolTypes = {     "triangleUp": d3.svg.symbol().type("triangle-up"),     "circle": d3.svg.symbol().type("circle"),     "diamond": d3.svg.symbol().type("diamond"), };   svg.selectAll("path")     .data(dataSet)     .enter().append("path")     .attr("class", "dot")     .attr("transform", function(d) {         return "translate(" + x(d.hour) + "," + y(d.yval) + ")";     })     .attr("d", function(d, i) {         if (d.bar === "0")             return symbolTypes.circle();         else if (d.bar === "1")             return symbolTypes.triangleUp();         else             return symbolTypes.diamond();     })     .style("fill", function(d) {         return d.color;     });   var xAxis = d3.svg.axis().scale(x).orient("bottom"),     yAxis = d3.svg.axis().scale(y).orient("left");  svg.append("g")     .attr("class", "axis")     .attr("transform", "translate(0, 362)")     .call(xAxis);  svg.append("g")     .attr("class", "axis")     .attr("transform", "translate( 221, 0)")     .call(yAxis); 

`

     

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

La solución es simple: use ambas escalas al traducir los ejes:

  svg.append("g")     .attr("class", "axis")     .attr("transform", "translate(0," + y(0) + ")")     //your y scale here -----------------^     .call(xAxis);  svg.append("g")     .attr("class", "axis")     .attr("transform", "translate(" + x(0) + ", 0)")     //your x scale here --------------^     .call(yAxis);   

Aquí está su JSFiddle JS actualizado: http://jsfiddle.net/Dazeotfw/

y el mismo código en el fragmento de pila:

  var dataSet = [{    hour: 01,    yval: 188,    bar: "0",    color: "red"  }, {    hour: 02,    yval: 63,    bar: "1",    color: "deepskyblue"  }, {    hour: 14,    yval: 241,    bar: "0",    color: "red"  }, {    hour: -15,    yval: 241,    bar: "3",    color: "green"  }, {    hour: 19,    yval: 241,    bar: "0",    color: "red"  }, {    hour: 22,    yval: 318,    bar: "3",    color: "green"  }, {    hour: -08,    yval: -118,    bar: "1",    color: "deepskyblue"  }, {    hour: 22,    yval: -48,    bar: "0",    color: "red"  }, {    hour: 21,    yval: 31,    bar: "1",    color: "deepskyblue"  }, {    hour: 12,    yval: 38,    bar: "0",    color: "red"  }, {    hour: 16,    yval: 138,    bar: "3",    color: "green"  }, {    hour: 05,    yval: 344,    bar: "1",    color: "deepskyblue"  }, {    hour: 08,    yval: 218,    bar: "1",    color: "deepskyblue"  }, {    hour: 03,    yval: -18,    bar: "0",    color: "red"  }, {    hour: 18,    yval: 78,    bar: "3",    color: "green"  }, {    hour: -18,    yval: 98,    bar: "1",    color: "deepskyblue"  }];    var w = 500,    h = 500,    top_pad = 20,    left_pad = 100;  var x = d3.scale.linear()    .domain([d3.min(dataSet, function(d) {      return d.hour;    }), d3.max(dataSet, function(d) {      return d.hour;    })])    .range([left_pad, w - left_pad]),    y = d3.scale.linear()    .domain([d3.min(dataSet, function(d) {      return d.yval;    }), d3.max(dataSet, function(d) {      return d.yval;    })])    .range([h - top_pad, top_pad]);      var svg = d3.select("body")    .append("svg:svg")    .attr("width", w + left_pad)    .attr("height", h + top_pad);    var symbolTypes = {    "triangleUp": d3.svg.symbol().type("triangle-up"),    "circle": d3.svg.symbol().type("circle"),    "diamond": d3.svg.symbol().type("diamond"),  };      svg.selectAll("path")    .data(dataSet)    .enter().append("path")    .attr("class", "dot")    .attr("transform", function(d) {      return "translate(" + x(d.hour) + "," + y(d.yval) + ")";    })    .attr("d", function(d, i) {      if (d.bar === "0")        return symbolTypes.circle();      else if (d.bar === "1")        return symbolTypes.triangleUp();      else        return symbolTypes.diamond();    })    .style("fill", function(d) {      return d.color;    });    var xAxis = d3.svg.axis().scale(x).orient("bottom"),    yAxis = d3.svg.axis().scale(y).orient("left");    svg.append("g")    .attr("class", "axis")    .attr("transform", "translate(0," + y(0) + ")")    .call(xAxis);    svg.append("g")    .attr("class", "axis")    .attr("transform", "translate(" + x(0) + ", 0)")    .call(yAxis);  
  .axis path,  .axis line {    fill: none;    stroke: #aaa;    shape-rendering: crispEdges;  }    .axis text {    font-family: sans-serif;    font-size: 11px;  }  
  <script src="https://d3js.org/d3.v3.min.js"></script>  
 

The solution is simple: use both scales when translating the axes:

svg.append("g")     .attr("class", "axis")     .attr("transform", "translate(0," + y(0) + ")")     //your y scale here -----------------^     .call(xAxis);  svg.append("g")     .attr("class", "axis")     .attr("transform", "translate(" + x(0) + ", 0)")     //your x scale here --------------^     .call(yAxis); 

Here is your updated jsfiddle: http://jsfiddle.net/dazeotfw/

And the same code in the Stack snippet:

var dataSet = [{    hour: 01,    yval: 188,    bar: "0",    color: "red"  }, {    hour: 02,    yval: 63,    bar: "1",    color: "deepskyblue"  }, {    hour: 14,    yval: 241,    bar: "0",    color: "red"  }, {    hour: -15,    yval: 241,    bar: "3",    color: "green"  }, {    hour: 19,    yval: 241,    bar: "0",    color: "red"  }, {    hour: 22,    yval: 318,    bar: "3",    color: "green"  }, {    hour: -08,    yval: -118,    bar: "1",    color: "deepskyblue"  }, {    hour: 22,    yval: -48,    bar: "0",    color: "red"  }, {    hour: 21,    yval: 31,    bar: "1",    color: "deepskyblue"  }, {    hour: 12,    yval: 38,    bar: "0",    color: "red"  }, {    hour: 16,    yval: 138,    bar: "3",    color: "green"  }, {    hour: 05,    yval: 344,    bar: "1",    color: "deepskyblue"  }, {    hour: 08,    yval: 218,    bar: "1",    color: "deepskyblue"  }, {    hour: 03,    yval: -18,    bar: "0",    color: "red"  }, {    hour: 18,    yval: 78,    bar: "3",    color: "green"  }, {    hour: -18,    yval: 98,    bar: "1",    color: "deepskyblue"  }];    var w = 500,    h = 500,    top_pad = 20,    left_pad = 100;  var x = d3.scale.linear()    .domain([d3.min(dataSet, function(d) {      return d.hour;    }), d3.max(dataSet, function(d) {      return d.hour;    })])    .range([left_pad, w - left_pad]),    y = d3.scale.linear()    .domain([d3.min(dataSet, function(d) {      return d.yval;    }), d3.max(dataSet, function(d) {      return d.yval;    })])    .range([h - top_pad, top_pad]);      var svg = d3.select("body")    .append("svg:svg")    .attr("width", w + left_pad)    .attr("height", h + top_pad);    var symbolTypes = {    "triangleUp": d3.svg.symbol().type("triangle-up"),    "circle": d3.svg.symbol().type("circle"),    "diamond": d3.svg.symbol().type("diamond"),  };      svg.selectAll("path")    .data(dataSet)    .enter().append("path")    .attr("class", "dot")    .attr("transform", function(d) {      return "translate(" + x(d.hour) + "," + y(d.yval) + ")";    })    .attr("d", function(d, i) {      if (d.bar === "0")        return symbolTypes.circle();      else if (d.bar === "1")        return symbolTypes.triangleUp();      else        return symbolTypes.diamond();    })    .style("fill", function(d) {      return d.color;    });    var xAxis = d3.svg.axis().scale(x).orient("bottom"),    yAxis = d3.svg.axis().scale(y).orient("left");    svg.append("g")    .attr("class", "axis")    .attr("transform", "translate(0," + y(0) + ")")    .call(xAxis);    svg.append("g")    .attr("class", "axis")    .attr("transform", "translate(" + x(0) + ", 0)")    .call(yAxis);
.axis path,  .axis line {    fill: none;    stroke: #aaa;    shape-rendering: crispEdges;  }    .axis text {    font-family: sans-serif;    font-size: 11px;  }
<script src="https://d3js.org/d3.v3.min.js"></script>
 
 

Relacionados problema

1  Uso de una tabla HighStock con series apiladas  ( Using a highstock chart with stacked series ) 
Actualmente tengo una tabla de columnas apiladas de altharts que se parece a esto: y tengo tantos datos para poner en ese gráfico que simplemente se verí...

1  PrimeFaces: Posición de gráficos y leyendas  ( Primefaces charts and legend position ) 
Estoy trabajando para armar un gráfico de barras apilado bastante básico con PrimeFaces. El gráfico en sí parece construir bien. Sin embargo, la leyenda se es...

0  Haga un bucle para mostrar el objeto de datos de la API en Render usando gráficos reaccsjs  ( Make a for loop to show data object from api in render using charts reactjs ) 
Necesito mostrar algunos datos de la API en el gráfico reaccionar ( https : //canvasjs.com/react-charts/chart-index-data-label/ ) Esta es mi API en frente: ...

0  MS THRICK CONTROL: optimice el método para mostrar las columnas de valor 'cero' y para un tipo de gráfico de línea  ( Ms chart control optimize method for displaying zero y value columns for a l ) 
Estoy usando las extensiones de Microsoft Chart que se envían con VS 2010. Esto se adapta bien a mis necesidades, pero me he encontrado con una molestia y est...

1  Estoy trabajando en los gráficos de barras de Google, estoy atrapado con agregar colores a las barras individuales  ( I am working on google bar charts i am stuck with adding colours to individual ) 
<provider android:name="com.google.android.gms.ads.MobileAdsInitProvider" android:authorities="${applicationId}.mobileadsinitprovider" android:ex...

4  Ajuste el color de la línea de la Línea de Cantmod Chartseries de verde a otro color  ( Set quantmod chartseries line color from green to another color ) 
usando la versión.string r versión 2.11.0 (2010-04-22) Quantmod "0.3-17" Windows XP Cuando se usa la función save:3 en save:4 CON save:5 El color de ...

40  NET 3.5 CONTROLS CONTROLS DE EXCEPCIÓN: ERROR EXPORTANDO SOLICITUD DE NIÑO PARA CHARTIMG.AXD  ( Net 3 5 chart controls exception error executing child request for chartimg ax ) 
¿Alguien recibe este error al usar el nuevo control gratuito de controles MS comprados en Dundas? "Error al ejecutar la solicitud del niño para cartimg.axd"...

1  Cómo usar el estilo del radio en la trampa de la trama Flex  ( How to use radius style in flex plot charting ) 
Cuando uso la propiedad RADIUS en la tabla de parcela Flex Causa una advertencia, dice Radio, ha sido desaprobado, por favor use el estilo del radio. No hay d...

1  Dinámicos Gráficos de Google  ( Dynamic google charts ) 
Pues tengo este código: NSLog(@"button pressed"); NSString* myurl=@"http://chart.apis.google.com/chart?chf=bg,s,67676700&chs=300x225&cht=p&chd=s:Uf9a&c...

0  Gráfico JS Integración  ( Chart js integration ) 
Estoy usando Chartjs por primera vez. He intentado probar un gráfico de barras simple de Module Chartjs. Pero no puedo Ver cualquier tabla en mi navegador...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos