d3.js从json渲染路径

Question

I have an array of paths in a datafile, such as :

["m 81.799,104.733 c -0.209,0 -0.418,-0.065 -0.594,-0.195 -0.338,-0.25 -0.484,-0.684 -0.365,-1.087 L 86.516,84.165 C 81.944,80.757 78.285,76.816 75.633,72.444 70.275,63.633 69.069,53.532 72.237,44.003 76.008,32.663 85.616,23.164 98.599,17.941 c 7.028,-2.826 14.528,-4.258 22.292,-4.258 19.038,0 36.076,8.56 44.466,22.339 5.347,8.792 6.564,18.839 3.428,28.29 -3.745,11.282 -13.358,20.765 -26.375,26.016 -8.404,3.386 -17.105,5.176 -25.166,5.176 -6.029,0 -11.677,-0.981 -16.796,-2.918 l -18.095,11.982 c -0.17,0.11 -0.362,0.165 -0.554,0.165 z m 39.091,-89.05 c -7.506,0 -14.755,1.384 -21.545,4.114 -12.437,5.003 -21.626,14.056 -25.211,24.837 -2.98,8.963 -1.84,18.471 3.208,26.772 2.623,4.324 6.295,8.213 10.917,11.559 0.343,0.248 0.493,0.686 0.373,1.092 l -5.101,17.33 16.19,-10.721 c 0.164,-0.108 0.356,-0.166 0.552,-0.166 h 0.136 c 0.125,0 0.248,0.023 0.363,0.068 4.992,1.947 10.533,2.935 16.469,2.935 7.806,0 16.25,-1.74 24.417,-5.031 12.471,-5.03 21.665,-14.066 25.225,-24.79 2.949,-8.884 1.799,-18.338 -3.238,-26.62 C 155.617,23.875 139.234,15.683 120.89,15.683 z",
                        "m 23.029,132.194 c -0.302,0 -0.589,-0.137 -0.779,-0.373 -0.195,-0.243 -0.266,-0.563 -0.191,-0.866 L 43.377,44.463 c 0.094,-0.382 0.404,-0.674 0.792,-0.745 l 7.025,-1.278 c 0.546,-0.098 1.064,0.262 1.163,0.805 0.099,0.543 -0.262,1.064 -0.805,1.163 l -6.388,1.163 -20.85,84.591 66.387,-1.701 18.873,-1.955 c 0.034,-0.003 0.069,-0.005 0.103,-0.005 h 9.028 c 0.034,0 0.068,0.002 0.102,0.005 l 17.148,1.757 71.179,0.283 -17.048,-83.047 -7.78,-0.584 c -0.551,-0.042 -0.963,-0.521 -0.922,-1.072 0.041,-0.551 0.525,-0.971 1.072,-0.922 l 8.533,0.641 c 0.445,0.033 0.814,0.358 0.904,0.796 l 17.447,84.993 c 0.061,0.295 -0.015,0.602 -0.206,0.835 -0.189,0.231 -0.474,0.366 -0.773,0.366 -10e-4,0 -0.003,0 -0.004,0 l -72.508,-0.293 -17.195,-1.757 h -8.926 l -18.899,1.955 -67.775,1.739 c -0.008,-0.002 -0.017,-0.002 -0.025,-0.002 z",
                        "m 112.686,128.126 c -0.2,0 -0.398,-0.061 -0.567,-0.177 -0.05,-0.034 -5.344,-3.563 -15.668,-3.433 -6.433,0.07 -62.314,1.164 -62.878,1.176 -0.34,-0.007 -0.683,-0.173 -0.869,-0.472 l -2.099,-3.373 c -0.144,-0.23 -0.187,-0.511 -0.12,-0.773 L 50.888,40.525 c 0.104,-0.413 0.459,-0.714 0.883,-0.75 5.548,-0.478 12.697,-0.983 19.004,-1.43 l 3.628,-0.257 c 0.565,-0.031 1.03,0.376 1.069,0.926 0.039,0.551 -0.375,1.029 -0.926,1.069 l -3.63,0.257 c -6.035,0.427 -12.84,0.909 -18.265,1.367 l -20.124,79.445 1.574,2.529 c 5.941,-0.116 56.236,-1.099 62.327,-1.165 9.432,-0.096 14.881,2.632 16.394,3.518 1.802,-0.564 8.606,-2.646 13.531,-3.503 0.062,-0.011 0.124,-0.012 0.188,-0.015 l 68.584,1.196 1.354,-2.551 -15.371,-79.381 c -3.833,-0.451 -8.821,-0.943 -14.157,-1.395 -0.551,-0.047 -0.959,-0.531 -0.912,-1.081 0.047,-0.55 0.542,-0.958 1.08,-0.912 5.702,0.483 11.013,1.011 14.952,1.489 0.431,0.052 0.779,0.376 0.861,0.803 l 15.577,80.444 c 0.044,0.225 0.009,0.457 -0.098,0.659 l -1.807,3.404 c -0.177,0.332 -0.513,0.543 -0.901,0.531 l -69.102,-1.205 c -5.466,0.964 -13.532,3.534 -13.613,3.56 -0.097,0.033 -0.2,0.049 -0.302,0.049 z",
                        "m 113.944,127.5 c -0.552,0 -1,-0.447 -1,-1 v -32 c 0,-0.553 0.448,-1 1,-1 0.552,0 1,0.447 1,1 v 32 c 0,0.553 -0.448,1 -1,1 z",
                        "m 146.943,77.5 h -23.592 l -0.282,-0.246 c -0.113,-0.099 -0.673,-0.638 -0.594,-1.576 0.089,-1.06 0.944,-2.071 2.612,-3.09 1.383,-0.844 2.143,-2.05 1.983,-3.147 -0.143,-0.985 -0.991,-1.755 -2.327,-2.111 -1.339,-0.357 -2.822,-0.546 -4.29,-0.546 -2.313,0 -4.408,0.476 -5.605,1.274 -0.994,0.661 -1.013,1.187 -1.02,1.359 -0.019,0.498 0.303,1.606 2.666,3.445 1.419,1.135 2.096,2.152 2.08,3.117 -0.011,0.637 -0.333,1.101 -0.632,1.323 L 117.676,77.5 H 95.944 V 62.109 c 0,-1.575 -0.615,-2.479 -1.688,-2.479 -0.569,0 -1.208,0.254 -1.802,0.717 -0.854,0.665 -2.017,1.03 -3.275,1.031 -2.798,0 -5.945,-1.823 -6.245,-5.827 -0.309,-4.108 0.936,-6.939 3.698,-8.414 0.898,-0.479 1.805,-0.721 2.695,-0.721 2.147,0 3.743,1.383 4.52,2.678 0.069,0.115 0.324,0.237 0.661,0.237 l 0,0 c 0.36,0 0.708,-0.136 0.955,-0.372 0.32,-0.307 0.483,-0.775 0.483,-1.393 V 34.5 h 49.891 l 0.029,0.97 c 0.01,0.346 0.254,8.493 0.254,10.529 0,1.015 0.481,1.801 0.896,1.801 0.25,0 0.604,-0.21 0.972,-0.576 1.049,-1.05 2.445,-1.653 3.831,-1.653 2.199,0 4.091,1.438 5.188,3.947 1.269,2.901 1.332,6.403 0.159,8.715 -0.577,1.139 -1.402,1.856 -2.387,2.076 -0.519,0.115 -0.997,0.17 -1.466,0.17 -1.751,0 -2.958,-0.779 -4.355,-1.68 l -0.267,-0.172 c -0.163,-0.104 -0.315,-0.16 -0.441,-0.16 -0.542,0 -1.306,1.209 -1.306,3.897 V 77.5 z m -22.297,-2 h 20.298 V 62.365 c 0,-4.348 1.708,-5.897 3.306,-5.897 0.517,0 1.028,0.161 1.521,0.477 l 0.271,0.174 c 1.621,1.046 2.582,1.621 4.304,1.238 0.374,-0.083 0.743,-0.449 1.037,-1.028 0.738,-1.456 0.988,-4.271 -0.208,-7.009 -0.775,-1.772 -1.967,-2.748 -3.355,-2.748 -0.858,0 -1.739,0.389 -2.418,1.067 -0.772,0.771 -1.574,1.162 -2.385,1.162 -1.624,0 -2.896,-1.669 -2.896,-3.801 0,-1.595 -0.158,-7.219 -0.225,-9.499 h -45.95 v 11.066 c 0,1.475 -0.598,2.357 -1.1,2.837 -0.616,0.589 -1.468,0.927 -2.337,0.927 l 0,0 c -1.033,0 -1.921,-0.452 -2.375,-1.208 -0.473,-0.788 -1.492,-1.708 -2.806,-1.708 -0.559,0 -1.148,0.164 -1.754,0.486 -2.055,1.097 -2.896,3.163 -2.645,6.5 0.206,2.747 2.283,3.977 4.25,3.977 0.804,0 1.55,-0.222 2.047,-0.609 0.957,-0.745 2.004,-1.139 3.031,-1.139 1.836,0 3.688,1.385 3.688,4.479 V 75.5 h 18.4 c -0.183,-0.25 -0.508,-0.604 -1.087,-1.068 -2.361,-1.837 -3.484,-3.504 -3.426,-5.089 0.042,-1.142 0.685,-2.135 1.909,-2.95 1.534,-1.022 3.981,-1.609 6.714,-1.609 1.639,0 3.3,0.212 4.804,0.613 2.114,0.563 3.532,1.968 3.792,3.757 0.28,1.931 -0.812,3.853 -2.92,5.141 -0.822,0.502 -1.268,0.919 -1.485,1.205 z"
                    ]

I have them come in as JSON, how do i iterate through them and generate paths in D3.js?

for instance :

var hexes = hexGroup
                    .append("svg:path")
                    .attr("d", function(d) { return d.pathArray; })
                    ;

does not work.

The JSON is nested, ie for instance:

[
    {
        hex: [-1,0],
        id: "1",
        stdCode:"RL.1.3",
        stdEID:"7DE8B170-7440-11DF-93FA-01FD9CFF4B22",
        stdTitle:"Describe story elements using key details",
        fillColor:"Red",
        pointsPossible:"10",
        atMasteryCount:"6",
        belowMasteryCount:"4",
        svgInnerArt:["m 81.799,104.733 c -0.209,0 -0.418,-0.065 -0.594,-0.195 -0.338,-0.25 -0.484,-0.684 -0.365,-1.087 L 86.516,84.165 C 81.944,80.757 78.285,76.816 75.633,72.444 70.275,63.633 69.069,53.532 72.237,44.003 76.008,32.663 85.616,23.164 98.599,17.941 c 7.028,-2.826 14.528,-4.258 22.292,-4.258 19.038,0 36.076,8.56 44.466,22.339 5.347,8.792 6.564,18.839 3.428,28.29 -3.745,11.282 -13.358,20.765 -26.375,26.016 -8.404,3.386 -17.105,5.176 -25.166,5.176 -6.029,0 -11.677,-0.981 -16.796,-2.918 l -18.095,11.982 c -0.17,0.11 -0.362,0.165 -0.554,0.165 z m 39.091,-89.05 c -7.506,0 -14.755,1.384 -21.545,4.114 -12.437,5.003 -21.626,14.056 -25.211,24.837 -2.98,8.963 -1.84,18.471 3.208,26.772 2.623,4.324 6.295,8.213 10.917,11.559 0.343,0.248 0.493,0.686 0.373,1.092 l -5.101,17.33 16.19,-10.721 c 0.164,-0.108 0.356,-0.166 0.552,-0.166 h 0.136 c 0.125,0 0.248,0.023 0.363,0.068 4.992,1.947 10.533,2.935 16.469,2.935 7.806,0 16.25,-1.74 24.417,-5.031 12.471,-5.03 21.665,-14.066 25.225,-24.79 2.949,-8.884 1.799,-18.338 -3.238,-26.62 C 155.617,23.875 139.234,15.683 120.89,15.683 z",
                        "m 23.029,132.194 c -0.302,0 -0.589,-0.137 -0.779,-0.373 -0.195,-0.243 -0.266,-0.563 -0.191,-0.866 L 43.377,44.463 c 0.094,-0.382 0.404,-0.674 0.792,-0.745 l 7.025,-1.278 c 0.546,-0.098 1.064,0.262 1.163,0.805 0.099,0.543 -0.262,1.064 -0.805,1.163 l -6.388,1.163 -20.85,84.591 66.387,-1.701 18.873,-1.955 c 0.034,-0.003 0.069,-0.005 0.103,-0.005 h 9.028 c 0.034,0 0.068,0.002 0.102,0.005 l 17.148,1.757 71.179,0.283 -17.048,-83.047 -7.78,-0.584 c -0.551,-0.042 -0.963,-0.521 -0.922,-1.072 0.041,-0.551 0.525,-0.971 1.072,-0.922 l 8.533,0.641 c 0.445,0.033 0.814,0.358 0.904,0.796 l 17.447,84.993 c 0.061,0.295 -0.015,0.602 -0.206,0.835 -0.189,0.231 -0.474,0.366 -0.773,0.366 -10e-4,0 -0.003,0 -0.004,0 l -72.508,-0.293 -17.195,-1.757 h -8.926 l -18.899,1.955 -67.775,1.739 c -0.008,-0.002 -0.017,-0.002 -0.025,-0.002 z",
                        "m 112.686,128.126 c -0.2,0 -0.398,-0.061 -0.567,-0.177 -0.05,-0.034 -5.344,-3.563 -15.668,-3.433 -6.433,0.07 -62.314,1.164 -62.878,1.176 -0.34,-0.007 -0.683,-0.173 -0.869,-0.472 l -2.099,-3.373 c -0.144,-0.23 -0.187,-0.511 -0.12,-0.773 L 50.888,40.525 c 0.104,-0.413 0.459,-0.714 0.883,-0.75 5.548,-0.478 12.697,-0.983 19.004,-1.43 l 3.628,-0.257 c 0.565,-0.031 1.03,0.376 1.069,0.926 0.039,0.551 -0.375,1.029 -0.926,1.069 l -3.63,0.257 c -6.035,0.427 -12.84,0.909 -18.265,1.367 l -20.124,79.445 1.574,2.529 c 5.941,-0.116 56.236,-1.099 62.327,-1.165 9.432,-0.096 14.881,2.632 16.394,3.518 1.802,-0.564 8.606,-2.646 13.531,-3.503 0.062,-0.011 0.124,-0.012 0.188,-0.015 l 68.584,1.196 1.354,-2.551 -15.371,-79.381 c -3.833,-0.451 -8.821,-0.943 -14.157,-1.395 -0.551,-0.047 -0.959,-0.531 -0.912,-1.081 0.047,-0.55 0.542,-0.958 1.08,-0.912 5.702,0.483 11.013,1.011 14.952,1.489 0.431,0.052 0.779,0.376 0.861,0.803 l 15.577,80.444 c 0.044,0.225 0.009,0.457 -0.098,0.659 l -1.807,3.404 c -0.177,0.332 -0.513,0.543 -0.901,0.531 l -69.102,-1.205 c -5.466,0.964 -13.532,3.534 -13.613,3.56 -0.097,0.033 -0.2,0.049 -0.302,0.049 z",
                        "m 113.944,127.5 c -0.552,0 -1,-0.447 -1,-1 v -32 c 0,-0.553 0.448,-1 1,-1 0.552,0 1,0.447 1,1 v 32 c 0,0.553 -0.448,1 -1,1 z",
                        "m 146.943,77.5 h -23.592 l -0.282,-0.246 c -0.113,-0.099 -0.673,-0.638 -0.594,-1.576 0.089,-1.06 0.944,-2.071 2.612,-3.09 1.383,-0.844 2.143,-2.05 1.983,-3.147 -0.143,-0.985 -0.991,-1.755 -2.327,-2.111 -1.339,-0.357 -2.822,-0.546 -4.29,-0.546 -2.313,0 -4.408,0.476 -5.605,1.274 -0.994,0.661 -1.013,1.187 -1.02,1.359 -0.019,0.498 0.303,1.606 2.666,3.445 1.419,1.135 2.096,2.152 2.08,3.117 -0.011,0.637 -0.333,1.101 -0.632,1.323 L 117.676,77.5 H 95.944 V 62.109 c 0,-1.575 -0.615,-2.479 -1.688,-2.479 -0.569,0 -1.208,0.254 -1.802,0.717 -0.854,0.665 -2.017,1.03 -3.275,1.031 -2.798,0 -5.945,-1.823 -6.245,-5.827 -0.309,-4.108 0.936,-6.939 3.698,-8.414 0.898,-0.479 1.805,-0.721 2.695,-0.721 2.147,0 3.743,1.383 4.52,2.678 0.069,0.115 0.324,0.237 0.661,0.237 l 0,0 c 0.36,0 0.708,-0.136 0.955,-0.372 0.32,-0.307 0.483,-0.775 0.483,-1.393 V 34.5 h 49.891 l 0.029,0.97 c 0.01,0.346 0.254,8.493 0.254,10.529 0,1.015 0.481,1.801 0.896,1.801 0.25,0 0.604,-0.21 0.972,-0.576 1.049,-1.05 2.445,-1.653 3.831,-1.653 2.199,0 4.091,1.438 5.188,3.947 1.269,2.901 1.332,6.403 0.159,8.715 -0.577,1.139 -1.402,1.856 -2.387,2.076 -0.519,0.115 -0.997,0.17 -1.466,0.17 -1.751,0 -2.958,-0.779 -4.355,-1.68 l -0.267,-0.172 c -0.163,-0.104 -0.315,-0.16 -0.441,-0.16 -0.542,0 -1.306,1.209 -1.306,3.897 V 77.5 z m -22.297,-2 h 20.298 V 62.365 c 0,-4.348 1.708,-5.897 3.306,-5.897 0.517,0 1.028,0.161 1.521,0.477 l 0.271,0.174 c 1.621,1.046 2.582,1.621 4.304,1.238 0.374,-0.083 0.743,-0.449 1.037,-1.028 0.738,-1.456 0.988,-4.271 -0.208,-7.009 -0.775,-1.772 -1.967,-2.748 -3.355,-2.748 -0.858,0 -1.739,0.389 -2.418,1.067 -0.772,0.771 -1.574,1.162 -2.385,1.162 -1.624,0 -2.896,-1.669 -2.896,-3.801 0,-1.595 -0.158,-7.219 -0.225,-9.499 h -45.95 v 11.066 c 0,1.475 -0.598,2.357 -1.1,2.837 -0.616,0.589 -1.468,0.927 -2.337,0.927 l 0,0 c -1.033,0 -1.921,-0.452 -2.375,-1.208 -0.473,-0.788 -1.492,-1.708 -2.806,-1.708 -0.559,0 -1.148,0.164 -1.754,0.486 -2.055,1.097 -2.896,3.163 -2.645,6.5 0.206,2.747 2.283,3.977 4.25,3.977 0.804,0 1.55,-0.222 2.047,-0.609 0.957,-0.745 2.004,-1.139 3.031,-1.139 1.836,0 3.688,1.385 3.688,4.479 V 75.5 h 18.4 c -0.183,-0.25 -0.508,-0.604 -1.087,-1.068 -2.361,-1.837 -3.484,-3.504 -3.426,-5.089 0.042,-1.142 0.685,-2.135 1.909,-2.95 1.534,-1.022 3.981,-1.609 6.714,-1.609 1.639,0 3.3,0.212 4.804,0.613 2.114,0.563 3.532,1.968 3.792,3.757 0.28,1.931 -0.812,3.853 -2.92,5.141 -0.822,0.502 -1.268,0.919 -1.485,1.205 z"
                    ]        
    },

    {
        hex: [-1,1],
        id: "2",
        stdCode:"RL.1.9",
        stdEID:"7DE8B170-7440-11DF-93FA-01FD9CFF4B23",
        stdTitle:"Re-tell stories with details and understanding",
        fillColor:"Yellow",
        pointsPossible:"10",
        atMasteryCount:"6",
        belowMasteryCount:"4",
        svgInnerArt:[]        
    },

So for each element i can easily get the children, but i want to get each element in array svgInnerArt and use that to construct multiple svg paths. Any ideas?

Answer 1

You will want to use d3.json to do this.

Assuming that hexGroup already exists as a d3 selection of an svg g element, you can do the following:

// request a json file at the specified path, storing the response in a variable
d3.json('path/to/your/jsonFile.json', function(response) {
  // create a selection to bind the data to
  var hexes = hexGroup.selectAll('path')
    // bind the incoming data
    .data(response)
   // for each incoming datapoint...
   .enter()
    // append a path element...
    .append('svg:path')
    // giving it a pathdata attribute corresponding to the current element in the data array
    .attr('d', function(d) { return d; });
  }
});