javascript - print - ¿Hay algún truco para usar gráficos d3 en jsf?

primefaces enterprise

Question

Estoy usando Prime Faces en Liferay, ¿cuál es el truco para que los ejemplos de D3 aparezcan en jsf land específicamente Prime Faces en Liferay? El ejemplo que estoy tratando de hacer funcionar en JSF es este: ¿Cómo funcionaría el ejemplo del gráfico de diferencias d3.js con datos json?

Answer 1

Me lo imaginé. El truco es hacer referencia a un elemento div en lugar de cuerpo. Todos los ejemplos que he visto usan "cuerpo". En un contenedor de portal no se quiere usar cuerpo ya que eso lo colocará fuera de su puerto. Se requiere un div y debe estar referenciado como en el javascript. He incluido el nuevo código a continuación

    <%@ page import="javax.portlet.WindowState" %>
    <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
    <%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>


    <portlet:defineObjects />

    <form action="<portlet:actionURL />" method="post" name="<portlet:namespace />fm">
    <div id="svgContainer" ></div>
    <script type="text/javascript" >
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%Y%m%d").parse;

    var x = d3.time.scale()
        .range([0, width]);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var line = d3.svg.area()
        .interpolate("basis")
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d["student"]); });

    var area = d3.svg.area()
        .interpolate("basis")
        .x(function(d) { return x(d.date); })
        .y1(function(d) { return y(d["student"]); });

    var svg = d3.select("#svgContainer").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    var count =0;

    d3.json("<%=request.getContextPath()%>/data/data.json", function(error, data) {
      if(error) return console.warn(error);
          data.data.forEach(function(d) {
            d.date = parseDate(d.date);
            d["student"]= +d["student"];
            d["average"] = +d["average"];
            count++;

          });

      x.domain(d3.extent(data.data, function(d) { return d.date; }));

      y.domain([
        d3.min(data.data, function(d) { return Math.min(d["student"], d["average"]); }),
        d3.max(data.data, function(d) { return Math.max(d["student"], d["average"]); })
      ]);

      svg.datum(data.data);

      svg.append("clipPath")
          .attr("id", "clip-below")
        .append("path")
          .attr("d", area.y0(height));

      svg.append("clipPath")
          .attr("id", "clip-above")
        .append("path")
          .attr("d", area.y0(0));

      svg.append("path")
          .attr("class", "area above")
          .attr("clip-path", "url(#clip-above)")
          .attr("d", area.y0(function(d) { return y(d["average"]); }));

      svg.append("path")
          .attr("class", "area below")
          .attr("clip-path", "url(#clip-below)")
          .attr("d", area);

      svg.append("path")
          .attr("class", "line")
          .attr("d", line);

      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Grades");
    });



    </script>
    </form>